Binding with jQuery (Bind, Live, Delegate)

Posted: admin | Comments: 0 | June 2nd, 2011
Jun 02

In jQuery there are 3 main ways to bind an event to an element in your page. These three methods are .bind(), .live(), and .delegate(). At first glance they seem very similar and sometimes it may not matter which one you do use. However there are clear differences and knowing them will definitely help you choose the correct method.
Bind()

jQuery’s oldest binding method and one of the most commonly used. This function is great if you have a set of elements you want to bind and there’s no more dynamically added elements. This is because the bind() method doesn’t add the event to elements after the dom has finished loading. So if you have some elements added afterwards they don’t get binded. The .bind() syntax follows $(‘selector’).bind(‘event’, EventFunction); and creates an array of the selectors at the time the dom is loaded, and adds the event function to the event on those selectors. Let’s use a list of tags as an example, in this example there are 4 links added in the html and there is a link to add more elements to the page, the event will change the link to green.

<ul class=”demoList1”>
	<li><a href=”#”>link 1</a></li>
	<li><a href=”#”>link 2</a></li>
	<li><a href=”#”>link 3</a></li>
	<li><a href=”#”>link 4</a></li>
</ul>
<a href=”#” class=”addElement”>add</a>
<script type=”text/javascript”>
	$(document).ready(function(){
$(‘.addElement).click(function(){ //The .click() method is a more direct way to invoke a //.bind() with a click event
	$(‘.demoList1).append(<li><a href=”#”>New Link</a></li>);
});
});
$(‘.demoList1 a’).bind(‘click’, function(){
	$(this).css(‘color’,’green’);
});
</script>

As you can see links that are added later don’t have the green click effect. This also applies to elements added via javascript, not necessarily added when you click something, So as long as all the elements in a list get loaded in from html bind is an acceptable method, but lacking the use for dynamically added elements does give it a large downfall. This is where the next two methods come to the rescue.

Delegate()
Delegate is jQuery’s third binding method and although it may seem like madness going out of order, I promise I have my reason for doing so. This is because the syntax for the .delegate() helps explain how the .live() method actually works. Still confused? It will make sense, I promise. The .delegate() method has a different syntax than the .bind() does. This is because it works in an entirely different way. The syntax is $(‘#container’).delegate(‘.selector”, event, eventFunction);. The way the delegate function works is that it takes the eventFunction and adds it to the container. Kind of what you would expect if you ignored the other two parameters. However when .delegate() is used it waits till an event occurs on an element inside the container. It then checks to see if a)the correct event was called, and b)if the correct selector was called. This is because although the event happens to a specific element it ends up traveling through the dom tree through all the containers back up to the document. When both “a” and “b” are true the eventFunction is then called. Why would you ever need to use something whose function is so complicated you may ask, well the answer is rather simple. Let’s look at the code above for the .bind() function. The biggest drawback is that dynamically added elements don’t get bound with the event. Well since the event is no longer bound to the elements but to the container holding the elements, when a new element is added to the container, it can use the eventFunction. When .delegate() looks for the element the event occurred on it doesn’t matter if it was added before or after .delegate() was added since that eventFunction gets added to the container thatalready exists.

<ul class=”demoList2”>
<li><a href=”#”>link 1</a></li>
	<li><a href=”#”>link 2</a></li>
	<li><a href=”#”>link 3</a></li>
	<li><a href=”#”>link 4</a></li>
</ul>
<a href=”#” class=”addElement”>add</a>
<script type=”text/javascript”>
	$(document).ready(function(){
$(‘.addElement).click(function(){ //The .click() method is a more direct way to invoke a //.bind() with a click event
	$(‘.demoList3).append(<li><a href=”#”>New Link</a></li>);
});
});
$(‘.demoList2).delegate(‘a’, ‘click’, function(){
	$(this).css(‘color’,’green’);
});
</script>

In this example using .delegate(), you can see that even dynamically added elements get bound to the eventFunction.

Live()
The live() method is jQuery’s second binding method. This binding method is much more powerful than the .bind() method because it will bind events to any element regardless of when it was added like the .delegate() method. This is because of the way the .live() method works. It has the same syntax as the .bind method but works like the .delegate() method (I bet your glad I went over delegate first now aren’t you?). With a syntax of the .bind() $(‘selector’).bind(‘event’, EventFunction); and knowing that it works like .delegate() where it binds the event to a container, the question is, where does it bind the event to? It doesn’t bind it to the selector since it would then function exactly like the bind and wouldn’t work for elements added afterwards. Well since the event travels all the way through the tree, the .live() adds the eventFunction to the document, then checks to see if the selector and event match.

<ul class=”demoList3”>
<li><a href=”#”>link 1</a></li>
	<li><a href=”#”>link 2</a></li>
	<li><a href=”#”>link 3</a></li>
	<li><a href=”#”>link 4</a></li>
<ul/>
<a href=”#” class=”addElement”>add</a>
<script type=”text/javascript”>
	$(document).ready(function(){
$(‘.addElement).click(function(){ //The .click() method is a more direct way to invoke a //.bind() with a click event
	$(‘.demoList3).append(<li><a href=”#”>New Link</a></li>);
});
});
$(‘.demoList3 a’).live(‘click’, function(){
	$(this).css(‘color’,’green’);
});
</script>

This doesn’t actually apply the eventFunction to the demoList3 its still added to the document, the .live() just looks for the inside demoList3 inside of the document. As you can see, .live() and .delegate() do the same thing on the surface and unless you have something like FireQuery it is difficult to see exactly how the .live() and .delegate() functions differ.
In reality, unless you have an eventFunction that you want to bind to let’s say, every
tag on a page, the .live() method isn’t a wise option. This is because unlike the .delegate() method which only activates when an event inside the container is called. The .live() method activates for every element that occurs on the page, checking to see if the selector and event match the parameters. This uses unnecessary resources as it calls on the .live() function every time you click or even hover over anything. While this may not affect the site’s performance too much it still does affect the performance more than it needs too. The .delegate() checks all events that occur inside the #container. This dismisses a lot of the extra events that occur and thus make it better performance wise.

Overall the .live() function is better left to the obsolete table. Since .delegate() was created it can do what .live() does and does it better. If you need to bind to dynamically added elements your best bet is to stick with .delegate(), while .bind() and the other jQuery functions that are more direct descendants (.click(), .hover() etc…) are still great ways of binding static elements.

http://api.jquery.com/bind/
http://api.jquery.com/delegate/
http://api.jquery.com/live/

Leave a Comment

Categories