.live() vs .bind()

Question

I want to know the main difference between

.live() vs. .bind()

methods in jQuery.

Solution 1

The main difference is that live will work also for the elements that will be created after the page has been loaded (i.e. by your javascript code), while bind will only bind event handlers for currently existing items.

// BIND example
$('div').bind('mouseover', doSomething);
// this new div WILL NOT HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

// LIVE example
$('div').live('mouseover', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Update:

jQuery 1.7 deprecated live() method and 1.9 has removed it. If you want to achieve the same functionality with 1.9+ you need to use a new method on() which has slightly different syntax as it's invoked on document object and the selector is passed as a parameter. Therefor the code from above converted to this new way of binding events will look like this:

// ON example
$(document).on('mouseover', 'div', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Solution 2

I did a statistical analysis of .bind() vs .live() vs .delegate() using FF profiler. I did 10 rounds of each (not a sufficient sample to be definitive, but illustrates the point). These are the results.

1) Single static element with an id using the click event:

.bind():     Mean = 1.139ms, Variance = 0.1276ms
.live():     Mean = 1.344ms, Variance = 0.2403ms
.delegate(): Mean = 1.290ms, Variance = 0.4417ms

2) Multiple static elements with a common class using the click event:

.bind():     Mean = 1.089ms, Variance = 0.1202ms
.live():     Mean = 1.559ms, Variance = 0.1777ms
.delegate(): Mean = 1.397ms, Variance = 0.3146ms

3) Multiple dynamic elements (first button creates second...) using the click event:

.bind():     Mean = 2.4205ms, Variance = 0.7736ms
.live():     Mean = 2.3667ms, Variance = 0.7667ms
.delegate(): Mean = 2.1901ms, Variance = 0.2838ms

Interpret how you wish, but it seems to me that as dynamic elements increase on a page, .delegate() seems to have the best performance while static elements perform best with .bind().

Keep in mind that I am using a very simple click event triggering an alert. Different pages, with different environments (ie. CPU, multi-tab browsing, running threads, etc) will render differing results. I used this as a basic guideline for my decision to use one or the other. Please advise if you have come up with a different result.

Thanks!

Solution 3

You should consider to use .delegate() instead of .live() whereever possible. Since event delegation for .live() always targets the body/document and you're able to limit "bubbling" with .delegate().

See http://api.jquery.com

UPDATE

From jQuery:

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, .delegate() remains the most effective means to use event delegation.

Solution 4

As of v1.7, .live, .bind, and .delegate have all been replaced by .on http://api.jquery.com/on/

I was curious of the diffence myself, so I wrote up an article with some code examples. http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/.

Sounds like depending upon how you call .on(), jquery will mimic .bind, .live, or .delegate. This gives your event handlers a more elegant implementation.

View more solutions