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

Answer 1

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');