jquery on to replace live?

Question

Possible Duplicate:
jquery: on vs live

I have code that works just fine using $('thing').live("mousemove", function(e) { and $('thing').live({mouseenter:function(e) {. I notice jquery said live is depreciated and to use on so i did. However it doesn't seem to work the way i expect it to. I had mousemove events but since objects were loaded dynamically the events werent triggering which is why i use live. Now live works perfectly but when i use on as jquery suggested it seems to act like .mousemove and such. It works on objects that exist when the code is executed and not on dynamically added events (the whole reason i use live).

Is there a way to tell on to act like live and add events on new object? or do i use live?

Show what you had working with `live()` and then we can try and help you out. Or, at the *very* least, show the full working code you had with `live()` (and HTML too). Plus: [live demos are good too](http://jsfiddle.net/). — David says reinstate Monica, Oct 19 '12 at 22:04

score 4 · Accepted Answer · answered Oct 19 '12 at 22:06

You need to delegate your event if you want it to work for Dynamically added elements

$(anyStaticParent).on("mousemove", "thing", function() {

     // You code Here
});

anyStaticParent can be any parent container of thing .. To be more general you can always set that to body

Also I see that 'thing' is not a specific element ..

use '.thing' - if Class

'#thing' - if ID

Mario S · Answer 2 · 2012-10-19T22:12:30.330

2

You just have to call .on in the correct way: $(document).on(event, selector, handler):

// Use an element that exist, like document or "body".
$(document).on("mousemove", "thing", function() {
  // Do something here...
});

Check the three last examples in the jquery docs.

edited Oct 19 '12 at 22:12

answered Oct 19 '12 at 22:04

Mario S

10,931
24
34
45

score 1 · Answer 3 · answered Oct 19 '12 at 22:05

1

You have to implement on a tiny bit differently so it behaves like live, binding it to the document with the selector as an argument:

$(document).on("mousemove", 'thing', function(e) { ... });

answered Oct 19 '12 at 22:05

st3inn

1,487
9
16

score 1 · Answer 4 · answered Oct 19 '12 at 22:11

The way to delegate with .on is to pass in a selector for dynamically added elements.

$('thing').on('mousemove', 'dynamically added thing', function(e) {
    //handler
});

For a less abstract example:

$("ul#menu").on("click", "li", function(event){
    //handler
});

Per the API, http://api.jquery.com/on/:

.on( events [, selector] [, data], handler(eventObject) )

.on( events-map [, selector] [, data] )

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

jquery on to replace live?

4 Answers4