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
The bind() method will not attach events to those elements which are added after DOM is loaded while live() and delegate() methods attach events to the future elements also. The difference between live() and delegate() methods is live() function will not work in chaining.
on() method: This method attaches events not only to existing elements but also for the ones appended in the future as well. The difference here between on() and live() function is that on() method is still supported and uses a different syntax pattern, unlike the above two methods.
The live() method attaches one or more event handlers for selected elements, and specifies a function to run when the events occur. Event handlers attached using the live() method will work for both current and FUTURE elements matching the selector (like a new element created by a script).
The delegate() Method in jQuery is used to add one or more event handlers to the specified element that are children of selected elements and are also used to specify a function to run whenever the event occurs.
.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
).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With