When you wish to attach an event handler in jQuery, you find yourself with no less than three ways of doing so; the
delegate() methods. Methods such as
blur() and their various friends fall under the
bind() category, as they simply invoke
bind() behind the scenes, as does
The following blog post outlines the differences between each method, which should help you to decide which method to use in which scenario.
The deal breaker
The most important behavioural difference to remember between the three methods is how they handle elements which would match the given selector , but are not yet in the DOM; the
bind() method quite literally iterates over each element matched by the selector and attaches an event handler to it. Because of this, it will only attach the event handler to elements that are currently in the DOM. Both the
delegate() methods work differently however, and this variation in functionality ensures the handler will fire for all current and future elements in the DOM. Because of this, you cannot use
bind() if some of the elements you wish to attach handlers for are not in the DOM at the time you attach the handler. You must use either
delegate() in this scenario.
So how do
delegate() work? Can they look into the future?
- One of the elements cancels the propagation using either
- The event reaches the document element.
This means that an event that occurs on an element can be captured and handled by any of its ancestors; for example, a table can capture any event which occurs on any of it cell’s. Both
delegate() exploit this behaviour and attach an event handler to an element which is:
- Registered in the DOM at the time the event handler is bound.
- An ancestor of the target elements, so that the event reaches it.
live() always attaches the event handler to the document element, whereas
delegate() allows you to specify which element is chosen. It is probably worth a mention at this point that without jQuery, some events would not bubble at all, and other events bubble only in some browsers; however jQuery performs work behind the scenes to fix this behaviour.
That’s cool, but I’m here to find out when to choose
The bottom line is that neither has a major advantage over the other.
delegate() is often seen as having an advantage over
live() for the following reasons:
delegate()allows the developer to choose where the handler is bound to;
live()always binds the handler to the document. This allows the developer to minimise the amount of ancestors the event has to bubble through before the handler is found; which lessens the chances of an element preventing the propagation of the event.
- To call
live(), you first need to construct a jQuery object of the elements that currently match the selector. However with
delegate()this is not the case. It is unusual (although not unheard of) for this jQuery object to be needed; i.e. a waste of computation.
Just to complicate things: another reason not to use
As touched upon earlier,
bind() will attach an event handler to every element matched by the selector. If your selector matches 100 elements, 100 event handlers will be added. However, delegate() and live() attach only one event handler, no matter how many elements your selector matches. No doubt you can see the performance advantage already, and you can see that if you want to attach an event handler to number of elements, delegate or live should be chosen over bind.
So a quick and easy to remember summary?
Some of the elements I want to attach the event to will be added to the DOM at a later time (e.g. programmatically/ via AJAX/ another event handler)
You cannot use
I will be attaching the handler to a number of elements
I only need the elements to attach the handler to them; I don’t need them for anything else (e.g. you won’t be adding classes/ changing attributes)