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
Tweet
About The Author
5 comments:
When Chuck Norris codes with jQuery, he doesn't use .live(), he uses .notyetkilledbyme().
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.
Could you Plz tell me what exactly the profit is, of using bind script?? does it make script faster???
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()."
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
Post a Comment