educational

Try Getting Out of a Bind by Going Live

Stephen Yagielowicz

An alternative way to code event handling in jQuery (.live instead of .bind) may offer benefits for certain applications.

Bind (api.jquery.com/bind/) is a means of attaching an event handler to an element. The command has an antithesis, .unbind(), which will remove a previously attached event handler from a specified element. Together, these commands allow jQuery to automate and alter actions in response to events such as a click or mouse over; for an easy example:

One of its biggest benefits, however, is that .live() supports event delegation such as may be found in dynamic web environments.

$('#test').bind('click', function() {
alert('You clicked on the element "test"');
});

The code above binds the click event to an element, such as a div, with an ID of “test” — clicking on that element will now launch an alert dialog box in response. Using jQuery also allows shortcuts for binding standard event types, such as enabling the use of .click() in place of .bind('click').

Multiple .bind() events can be scripted and their handlers readily manipulated, making this an efficient technique for accomplishing a wide range of tasks.

But is it always the best choice?

Live (api.jquery.com/live/), a variation of .bind(), offers an alternative method for attaching event handlers to specified elements.

According to jQuery.com, “When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call.”

Live mitigates this need.

Like .bind(), the .live() command has an antithesis, .die(), which removes previously attached event handlers from their assigned element.

One of its biggest benefits, however, is that .live() supports event delegation such as may be found in dynamic web environments.

Related: