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.
-
2From 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(). – Ethan Brown May 10 '12 at 01:11
-
1possible duplicate of [jQuery: live() vs delegate()](http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate) and [Jquery live() vs delegate()](http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate) -- `on` and `delegate` can be seen as equivalent for this case. Also the [documentation](http://api.jquery.com/live/) contains a list of drawbacks of `.live()`. – Felix Kling May 10 '12 at 01:18
-
1You 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 '12 at 13:30
3 Answers
.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.

- 19,250
- 5
- 52
- 63
-
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. – Felix Kling May 10 '12 at 01:22
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.

- 10,593
- 2
- 35
- 47
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.

- 683,504
- 96
- 985
- 979