jQuery: live() vs delegate()
Asked Answered
L

4

51

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

Laevorotatory answered 17/11, 2010 at 12:26 Comment(2)
A concise summary: JQuery -- live vs delegate.Theorize
In addition to the answer below, readers might want to have a look at this unbelievably good article explaining the difference between bind, live and delegate.Kwh
N
58

.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).

No answered 17/11, 2010 at 12:29 Comment(2)
Great explanation, live always smelled funny to me. It's much better to restrict your handlers just to the portion you care about.Tewell
See some performance benchmarks https://mcmap.net/q/139150/-live-vs-bind-duplicate/…Ticktock
E
6

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.

Edition answered 17/11, 2010 at 12:30 Comment(0)
R
3

From 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().

http://api.jquery.com/live/

Rafferty answered 3/12, 2011 at 12:28 Comment(0)
L
0

Live Method:

$("#mymethod").live("click", function() { alert("It checks the entire DOM"); });

Live Method Checks #mymethod in Entire DOM (Sometimes it will take time based on your DOM Contents)

Delegate Method:

$('.mycontainer').delegate('#mymethod','click',function() { alert('Checks only in mycontainer portion') });

Delagate does not search your whole DOM it searches only in your mycontainer portion.(Improve Performance)

Lyndseylyndsie answered 15/12, 2014 at 12:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.