jQuery: live() vs delegate()

I'm using jQuery in my web application. While reading its documentation I read about live() and delegate(). Although they have explained both methods, I don't understand the exact difference between them. Also not sure about which method is ideal in which scenario.

Please help me to get clear understanding of these methods.

Thanks

Solution 1:

.live() requires you run the selector immediately, unless you're using the result it's very wasteful. The event handler here is attached to document, so all event of that type from any elements bubbling must be checked. Here's a usage example:

$(".myClass").live("click", function() { alert("Hi"); });

Note that the statement $(".myClass") ran that selector to find all elements with that class even though we don't care about them, all we wanted was the string ".myClass" to match later when click events bubble up to document.

.delegate() actually uses .live() internally, but with a context. The selector is not run immediately, so it's more efficient already, and it doesn't attach to document (though it can) it's much more local...and all those other events from other element trees you don't care about are never even checked when bubbled...again more efficient. Here's a usage example:

$("#myTable").delegate("td", "click", function() { alert("Hi"); });

Now what happened here? We ran $("#myTable") to get the element to attach to (admittedly more expensive than document, but we're using the result. Then we attach an event handler to that (or those in other cases) elements. Only clicks from within that element are checked against the "td" selector when they happen, not from everywhere like .live() does (since everything is inside document).

Solution 2:

delegate() maps to live() in the jQuery code. The main difference is that live() is called on an element for which you wish to delegate the events to a different element. live() will delegate these events to the document object.

delegate(), on the other hand allows you to set which element events are delegated to by passing a selector. Events that bubble up to that element are handled if the originating element matches the selector.

As @NickCraver mentioned, delegate() performs better than live because it doesn't necessarily capture events from every element on the page, and it doesn't query the selector right away.