replacing jquery.live() with jquery.on() doesn't work

Question

I have several textboxes that are added dynamically after an ajax call. These boxes are tied to event handlers with .live() that currently work fine. I want to replace that with the newer .on() function.

This is what I have

$('.MyTextBox').live({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
});

When I replace .live() with .on() it doesn't work; the textboxes don't display their normal behavior after they're added.

If I write $('#MainDiv .MyTextBox').live({... , where MainDiv is the top DOM element where all the action happens, nothing happens either.

What am I missing?

Thanks

Answer 1

Heres the example they have, but with the delegate:

http://jsfiddle.net/HDtz3/

vs non-delegate: http://jsfiddle.net/HDtz3/1/

This is why i hate the new on syntax.

In yours simply do:

$('#MainDiv').on({   mouseenter: function () { .... },   mouseleave: function () { .... },   blur: function () { ... } }, '.MyTextBox'); 

and it should work

Answer 2

tl;dr: For direct swap-in replacement (accounts for dynamic loading), see the General Example below.

---

As other posters have noted, the accepted answer works, but $(#MainDiv') needs be a "non-dynamic element (not being loading again through ajax)". This is preferable performance-wise, as the event bubbling "distance" is limited. In the example, it only needs to bubble up to it's parent element to be handled.

The solution would be to bind to the "parent-most" element that is not going to be reloaded (via AJAX usually) - in the example, you'd need to bind to $('#MainDiv')'s parent.

However,

If you do want a direct swap-in replacement for live(), all you need to do is bind to the document element instead.

Generic examples

format 1:

//Replace:
$(selector).live(events, handler);           // Where `events` is a string

//With:
$(document)  .on(events, selector, handler); 

format 2:

//Replace:
$(selector).live(events);                    // Where `events` is 
                                             //   an object of `handler`s
//With:                                      //   (as in OP's example)
$(document)  .on(events, selector);

Note that with the on() examples,selector's container(s) can change and the binding will be automatically applied; the same functionality as live().

OP's example (format 2)

//Deprecated live() version:
$('.MyTextBox').live({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
});

//New on() version
$(document).on({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
},'.MyTextBox');

Answer 3

Aaron, Matt, I think you've got the selector in the wrong order (for a live conversion), Have a look at the API documentation for on- http://api.jquery.com/on/#example-7

$("body").on("click", "p", function(){
  //stuff
});

When I tried your method (I came here looking for a solution for updating my core version), console errors popped up for everything (1.8, 1.9 and 2.0). The target element should be the second parameter not the last. Not sure why your answer has been accepted as it doesn't work. Hope this helps.