difference between jQuery.live and jQuery.delegate

Question

I have read some post about why do not use jQuery.live() and I want to check if I got it:) When I call $("body").delegate('element','click', function);

Is it the same as $(element).live('click', function) ? In case of normal behaviour..According to the post there are some stopPropagation and performance boons, but is the main difference that live bind everytime to body element, while delegate can bind to another one?

score 6 · Accepted Answer · answered Apr 07 '11 at 21:59

6

One important difference is that ".live()" will actually build up the jQuery element list for the initial selector, even though the ".live()" function itself only needs the selector string. That means that if the selector is somewhat expensive, the code to set up the handler will go running all over the DOM for no good reason. The ".delegate()" call does not do that.

Really I don't see any reason that new code should use ".live()"; it was sort-of an architectural mistake and should eventually die quietly.

answered Apr 07 '11 at 21:59

Pointy

405,095
59
585
614

Actually `.delegate` does do that, it just does it from within the context of the original selector which makes it more efficient. And there are still reasons to use `.live()`. Take this site for instance -- having `$('.userInfo').live()` makes perfect sense to show info about a user on any of the dozens of places where you have usernames. – Apr 07 '11 at 22:05
ha ha ! Well I've been somewhat annoyed today after debugging a $.map() call that was trying to filter a 2-D array, only to discover the "feature" that arrays returned are *flattened* into the result ... – Pointy Apr 07 '11 at 22:07
@cwolves well all it has to do is something like `$(event.target).is(selector)` - it doesn't have to look at the whole DOM. – Pointy Apr 07 '11 at 22:07
@Pointy - `.live()` does that as well. The only difference is that `.delegate()` is triggered less often. – Apr 07 '11 at 22:11
Yes I am understand, however in case I need to replace whole body via ajax and actually mustn't reload it (music etc) and want to keep the binded events up I should use $(body).delegate against .live()?? – simekadam Apr 07 '11 at 22:12
@cwolves - yes, ".live()" does that at **event handling time**, but what I was talking about was **handler setup time**. Because you say `$(selector).live(...)`, jQuery will actually build the whole object at that point, but the ".live()" function only needs the selector. Of course, it's not really a big deal because the handler setup won't get called very often. – Pointy Apr 07 '11 at 22:15
@Sima - using ".live()" and "$('body').delegate()" is **exactly the same thing**. – Pointy Apr 07 '11 at 22:16
1

@Pointy - sorry, mis-understood your initial post. You could always call `$.fn.live` directly and bypass that though :) – Apr 07 '11 at 22:27

amosrivera · Answer 2 · 2011-04-07T22:05:42.457

Nettuts has a screencast just to explain this: Quick Tip: The Difference Between Live() and Delegate()

Quote from the site:

// Live(), introduced in 1.3, allows for the binding  
// of event handlers to all elements that match a  
// selector, including those created in the future.  
// It does this by attaching the handler to the document.  
// Unfortunately, it does not work well with chaining.  
// Don't expect to chain live() after calls like  
// children().next()...etc.  
$("li").live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
});   

// Delegate, new to version 1.4, perhaps should have been a complete  
// replacement for Live(). However, that obviously  
// would have broken a lot of code! Nonetheless,  
// delegate remedies many of the short-comings  
// found in live(). It attaches the event handler  
// directly to the context, rather than the document.  
// It also doesn't suffer from the chaining issues  
// that live does. There are many performance benefits  
// to using this method over live().  
$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

score 4 · Answer 3 · answered Apr 07 '11 at 22:01

is the main difference that live bind everytime to body element, while delegate can bind to another one?

Yes, exactly. Let's say you have a table that you add and remove rows from, and you want to handle clicks on those rows (or links or buttons within the rows). You could use live for that, but then the event has to bubble all the way down to the body level and let's face it, it feels a bit like a global variable. If you use delegate on the table element instead, you remain more targeted, isolated from other things going on on the page. delegate is a more modular, contained version of live.

score 3 · Answer 4 · answered Apr 07 '11 at 21:59

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will always propagate to the element to which they are delegated; event handlers on any elements below it will already have been executed by the time the delegated event handler is called.

score 3 · Answer 5 · answered Apr 07 '11 at 22:03

The short of it is that .live runs at the document level and .delegate runs on whatever element you specify. Why does it make a difference? If you have a mousemove event (or several) bound using .live, jQuery will execute code every time you move your mouse anywhere on the page to see if your callback function should run. This is extremely inefficient and is the reason for having .delegate. .delegate functions only run when the even originates inside of the dom node you specify. If, for example, you said $('ul#myUL').delegate(...), then jQuery would only check to see if the code should run when the event originated from within ul#myUL

difference between jQuery.live and jQuery.delegate

5 Answers5