Question

This works just fine in jQuery 1.6.4 for dynamic html:

$(".selector").die().live("click", function () {
    alert("clicked");
});

but I noticed in jQuery 1.7.1 that .live() is deprecated and replaced by .on(). How can I use .on() with dynamic html? Using .die().on("click", function()) doesn’t work and neither does .off().on("click", function()).

Thanks!

Answer 1

The new on method works in much the same way that delegate did in older versions of jQuery. You need to use it on an ancestor element and supply a selector. Since DOM events bubble up from the target, they will eventually reach the ancestor element you have used on on. When the event reaches that element, the target is checked to see if it matches your selector. If so, the event handler is executed:

$("#someAncestor").on("click", ".selector", function() {
    //Do stuff
});

There has been no need to use live since delegate was added, some time around version 1.4. Using delegate the above snippet would be:

$("#someAncestor").delegate(".selector", "click", function() {
    //Do stuff
});

delegate and on are far more efficient than live, since live always binds event handlers to the document. That means every single event triggered on the page has to be tested to see if it matches the selector and should therefore cause an event handler to run. With on, only events that bubble to the ancestor element will require this check.