Umang's posterous

The Difference Between jQuery’s .bind(), .live(), and .delegate()

Tue, 27 Sep 2011 10:43:00 -0700

The difference between .bind(), .live(), and .delegate() is not always apparent. Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications.

The basics

The DOM tree

First, it helps to visualize the DOM tree of an HTML document. A simple HTML page would look like this:

Event bubbling (aka event propagation)

When we click a link, it fires the click event on the link element, which triggers any functions we bound to that element’s click event.

$('a').bind('click', function() { alert("That tickles!") });

So a click will trigger the alert.

That click event then propagates up the tree, broadcasting to the parent element and then to each ancestor element that the click event was triggered on one of the descendent elements.

In the context of manipulating the DOM, document is the root node.

Now we can more easily illustrate the difference between .bind(), .live(), and .delegate().

.bind()

$('a').bind('click', function() { alert("That tickles!") });

This is the most straight forward binding method. jQuery scans the document for all $('a') elements and binds the alert function to each of their click events.

.live()

$('a').live('click', function() { alert("That tickles!") });

jQuery binds the alert function to the $(document) element, along with 'click' and 'a' as parameters. Any time an event bubbles up to the document node, it checks to see if the event was a click and if the target element of that event matches the 'a' CSS selector. If both are true, the function executes.

The live method can also be bound to a specific element (or “context”) other than document, like this:

$('a', $('#container')[0]).live(...);

.delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

jQuery scans the document for $('#container'), and binds the alert function along with the click event and 'a' CSS selector as parameters. Any time an event bubbles up to $('#container'), it checks to see if the event was a click and if the target element of that event matches the CSS selector. If both checks are true, it executes the function.

Notice this is similar to .live(), except that it binds the handler to the specified element instead of the document root. The astute JS’er might conclude that $('a').live() == $(document).delegate('a'), right? Well, no, not exactly.

Why .delegate() is better than .live()

jQuery’s delegate method is generally preferred to the live method for a few reasons. Consider the following examples:

$('a').live('click', function() { blah() });
// or
$(document).delegate('a', 'click', function() { blah() });

Speed

The latter is actually faster than the former, because the former first scans the entire document for all $('a') elements, storing them as jQuery objects. Even though the live function only needs to pass ‘a’ through as string argument to be evaluated later, the $() function doesn’t “know” that the chained method is going to be .live().

The delegate method on the other hand, only needs to find and store the $(document) element.

One hack to get around this is to call the live binding outside of the $(document).ready() state, so that it runs immediately. That way it will run before the DOM gets populated, and thus won’t find the elements or create the jQuery objects.

Flexibility and chain-ability

The live function is also convoluted. Think about it; it’s chained to the $('a') object set, but it’s actually acting on the $(document) object. For this reason, it can get hairy trying to chain methods to it. In fact, I’d argue the live method would make more sense as a global jQuery method in the form of $.live('a',...).

CSS selector only

And finally, the live method has a very large shortcoming, and that is that it can only operate on a direct CSS selector string. This makes it very inflexible.

For more on the CSS selector shortcoming, see Exploring jQuery .live() and .die().

Update: Thanks to pedalpete on Hacker News and Ellsass below in the comments for reminding me to add this next section.

Why .live() or .delegate() instead of .bind()

After all, bind seems so much clearer and more direct, doesn’t it? Well, there are 2 reasons we prefer delegate or live to bind:

To attach handlers to DOM elements that may not yet exist in the DOM. Because bind directly binds handlers to the individual elements, it cannot bind them to elements that aren’t on the page yet. If you were to run $('a').bind(...), and then new links were added to the page via AJAX, your bind handler would not work for these. live and delegate on the other hand are bound to another ancestor node, so it will work for any element exists now or in the future within that ancestor element.
Or to attach a handler to a single element or small group of elements, listening for events on descendent elements, instead of looping through and attaching the same function to 100 individual elements in the DOM. This would be the performance benefit of attaching a handler to one (or a small group of) ancestor element(s) instead of directly attaching handlers to all elements on the page.

Stopping propagation

I’d like to mention one last note concerning event propagation. Typically, we can stop other handler functions from running by using event methods like:

$('a').bind('click', function(e) {
e.preventDefault();
// or
e.stopPropagation();
});

However, when we use the live or delegate methods, the handler function won’t actually run until the event bubbles to the element to which the handler is actually bound. By this time, our other handler functions from .bind() have already run.

Coupons/Rewards Site Visitors: Home and Lifestyle Interests
Interest	% of Coupons/Rewards Site Visitors	Index
Gardening	46.5	109
Home Repair / Renovation	35.2	106
Religious Involvement	33.5	107
Landscaping	31.8	107
Playing Non-computer Video Games	29.6	98
Gourmet Cooking	29.0	118
Volunteer / Charity Work	29.0	117
Photography (as a hobby)	23.6	117
Crafts	20.7	118
Knitting / Sewing	20.1	119
Source: The Nielsen Company
Read as: 47% of adults online who visited Coupons/Rewards sites are interested in gardening, 9% more likely than the average adult online

Umang's posterous

The Difference Between jQuery’s .bind(), .live(), and .delegate()

Event bubbling (aka event propagation)

.bind()

.live()

.delegate()

Why .delegate() is better than .live()

Speed

Flexibility and chain-ability

CSS selector only

Why .live() or .delegate() instead of .bind()

Stopping propagation

Embrace Your Irrational Colleagues - Ron Ashkenas - Harvard Business Review

10-most-hated-jobs-cnbc

Apple's New CEO Tim Cook’s Message to Employees

Ellen Rubin on CloudSwitch's Business

Indian National Anthem Played on Google Les Paul doodle

History of Twitter Advertising [Infographic]

Homework

How else are you supposed to take it?

Starting a website is like having a baby

Deal Me In: Behind the Bargain-Hunting Audiences of Local Deal Sites

U.S. Audience Profile: Groupon and Living Social

LinkedIn Surpasses 100 Million Users [INFOGRAPHIC]

The Anatomy of a Perfect Landing Page

When to Swallow Your Daily Frog

But wait – what about the whole “plan your day by your productive capacity” bit?

10 Usability Crimes You Really Shouldn’t Commit

Crime 1: Form labels that aren’t associated to form input fields

Crime 2: A logo that doesn’t link to the homepage

Crime 3: Not specifying a visited link state

Crime 4: Not indicating an active form field

Crime 5: An image without an alt description

Crime 6: A background image without a background color

Crime 7: Using long boring passages of content

Crime 8: Underlining stuff that isn’t a link

Crime 9: Telling people to click here

Crime 10: Using justified text

Download PECL Extensions for Windows

Mimetype corruption in Firefox

What is the problem?

Why does firefox do that?

What is the cause of the bug?

How should you determine the mimetype, then?

And how do you make sure the file is attached?

The Final Word

Job Posting for Amazon.com Before it Launched

Facebook is not worth $33,000,000,000

Meet the New Enterprise Customer, He’s a Lot Like the Old Enterprise Customer

The Order of Adoption Has Changed

Meet The New Enterprise Customer

Big Companies Don’t Have Credit Cards

Large Enterprises Like Their Old Products

People in Big Companies Work to Live

Final Thoughts