Introduction

When you wish to attach an event handler in jQuery, you find yourself with no less than three ways of doing so; the bind(), live() and delegate() methods. Methods such as click(), change(), blur() and their various friends fall under the bind() category, as they simply invoke bind() behind the scenes, as does one().

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 live() and 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 live() or delegate() in this scenario.

So how do live() and delegate() work? Can they look into the future?

Not quite. They both utilize a powerful feature of JavaScript called event bubbling (you might have heard it being called event propagation). Event bubbling is not complicated; it merely ensures that an event will bubble (or propagate) through all the ancestors of the element the event occurred on until either:

• One of the elements cancels the propagation using either stopPropagation() or stopImmediatePropagation()
• 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 live() and 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 live() over delegate()

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 bind()

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 bind(); use delegate() or live().

I will be attaching the handler to a number of elements

Consider using delegate() or live() over bind()

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)

Consider using delegate() over bind() and live()