2

I was working on my site and since the time I'm learning jQuery, I was under the impression that .live() is very helpful, but then lately, many of you here have been recommend to use .on(), why is that so? What makes .on() superior than .live()? Thanks.

3
  • 2
    From the jQuery documentation: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). May 10, 2012 at 1:11
  • 1
    possible duplicate of jQuery: live() vs delegate() and Jquery live() vs delegate() -- on and delegate can be seen as equivalent for this case. Also the documentation contains a list of drawbacks of .live(). May 10, 2012 at 1:18
  • 1
    You should accept JAAulde's answer. The one you accepted was a copy and paste of his and then it was removed by a moderator. Please accept JAAulde's answer.
    – Brian
    May 18, 2012 at 13:30

3 Answers 3

7

.live() uses the document as the container to which events are delegated. .delegate(), now superceded by .on(), lets you choose a container to delegate to. By choosing a container lower in the tree, you lessen the quantity of bubbled events which must be tested to see if they meet the criteria for the delegated handling.

1
  • Also the events don't have to bubble up that far until they get processed... though I don't know whether this has any real impact in "normal" sized HTML documents. May 10, 2012 at 1:22
1

Using .live is bad because it's bad to put all .live event handlers on the document object. Things can really, really slow down. Not only do events have to bubble all the way up to the document, but you may have a lot of event handlers to look through on the document object. THE main advantage of .on() is that you can attach it to a parent object that is much closer to the actual object and drastically improve performance.

Further Reading

1

There are several issues with .live():

First off, the very syntax you use with .live():

$(".whatever").live("click", fn);

is wasteful because it evaluates $(".whatever") immediately, but then doesn't actually do anything with that initial evaluation.

Second off, .live() is inflexible and attaches all delegated event handlers to the document object. In fact these two lines of code are essentially the same thing:

$(".whatever").live("click", fn);
$(document).on("click", ".whatever", fn);

The problem with attaching all delegated event handlers to the document object is that every time an event bubbles up to the document, it must be compared with every single .live() event handler and some of the comparisons are not cheap to run because they are selector operations. If you have a lot of .live() event handlers and/or some slow to evaluate selectors, then event handling can really bog down.

With .on(), however, you can pick a static parent object much closer to the dynamic objects you're handling events from. This breaks up the event handler lists into much smaller lists and the smaller lists only have to be checked for a much smaller number of events. So, instead of these roughly equivalent lines of code:

$(".whatever").live("click", fn);
$(document).on("click", ".whatever", fn);

you can use something like this with .on():

$("immediate parent selector").on("click", ".whatever", fn);

which attaches the actual delegated event handler to a close ancestor of the dynamic objects making the event handling a lot more efficient. Not only do the events not have to bubble all the way up to the document object, but there's a much smaller list of selectors/objects to compare when each event happens.

You may want to note that .on() is essentially the same as .delegate(). The only difference is in the order of the arguments. In fact, in the internal implementation in jQuery, they all call the same function and all have the same core implementation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.