When to use the jQuery live() and bind() methods

I get asked occasionally when to use the bind() and live() jQuery event methods. bind() will bind a handler to one or more events for each matched element, at the time the call is made; whereas live() uses event delegation to bind a handler to an event for all current and ‘future’ matched elements. If you have controls that aren’t rendered dynamically, use bind(). If you have controls that are rendered dynamically, use live().

Here are two examples.

Bind

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title></title>
<
script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</
script>
<
script language="javascript" type="text/javascript">
$(function() {
$("input[type=button]").bind("click", function() {
$(this).after("<br /><input type=\"button\" value=\"Child\" />");
});
});
</script>
</
head>
<
body>
<
form>
<
input id="btnCreate" type="button" value="Create Children" />
</
form>
</
body>
</
html>

In the code above, when the user clicks on btnCreate, a new <button> will be created beneath it. Clicking on any of the newly created buttons will not replicate the functionality. This is where you need to implement the live() method.

Live

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title></title>
<
script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</
script>
<
script language="javascript" type="text/javascript">
$(function() {
$("input[type=button]").live("click", function() {
$(this).after("<br /><input type=\"button\" value=\"Child\" />");
});
});
</script>
</
head>
<
body>
<
form>
<
input id="btnCreate" type="button" value="Create Children" />
</
form>
</
body>
</
html>

In the code above, the user can now click on any of the buttons, and a new button will be created beneath it. The only difference is I’m using the live() method.

While choosing between bind() and live(), also note that we can bind only a single event in each call to the live() method whereas bind() can accept multiple events. Also blur, focus, mouseenter, mouseleave, change, submit are not supported with the live() method. Some more differences between live() and bind() have been listed over here



Will you give this article a +1 ? Thanks in advance


About The Author

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript. He also blogs regularly at DotNetCurry.com. Follow him on twitter @malcolmsheridan

5 comments:

Randal L. Schwartz said...

When Chuck Norris codes with jQuery, he doesn't use .live(), he uses .notyetkilledbyme().

Wai Yan Maw said...

But, it doesn't work properly when I use live() with anchor tag, that return false on click or another else. Anyway, we must do it (return false on click) so that the page doesn't scroll up to the top.

rishi said...

Could you Plz tell me what exactly the profit is, of using bind script?? does it make script faster???

Suprotim Agarwal said...

Rishi, if you read the article carefully, you will find that the advantage has been clearly summed up in one line "If you have controls that aren’t rendered dynamically, use bind(). If you have controls that are rendered dynamically, use live()."

amskape said...

Hi Friends ,
FYI:live() support multiple events
As of jQuery 1.4.1 .live() can accept multiple, space-separated events, similar to the functionality provided in .bind(). For example, we can "live bind" the mouseover and mouseout events at the same time like so:

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

Regards
Anes P.A