jQuery - bind() vs live() vs delegate() methods

I had already posted about jQuery bind(), jQuery live() and  jQuery delegate() functions. All the three jQuery functions are used to attach events to selectors or elements. But just think why there are 3 different functions for same purpose? There can't be. right? So in this post, I will explain you how these functions are different from each other.

bind() vs live()

The basic difference between bind and live is bind will not attach the event handler to those elements which are added/appended after DOM is loaded. bind() only attach events to the current elements not future element.

bind() vs delegate()

The difference between bind and delegate is same as how bind differs from live function. I had explained the difference with an example in this post jQuery delegate function Example/Demo.

live() vs delegate()

As we had seen the advantage of live and delegate function that they attaches event to those elements also which are added/appended after DOM is loaded. But how they both are different?

Well, the difference between live and delegate is, live function can't be used in chaining. live function needs to be used directly on a selector/element. For example, if I have a div with id "dvContainer",which have a table in it with some other elements. And I want to attach a click event to tr tag of the table.

1	$(document).ready(function(){

2	$("#dvContainer")children("table").find("tr").live("click",function(){

3	alert('I am' + $(this).text());

4

});

5

});

The above code will not work. However with delegate() you can achieve this functionality.

1	$(document).ready(function(){

2	$("#dvContainer")children("table").delegate("tr","click",function(){

3	alert('I am' + $(this).text());

4

});

5

});

There is one more difference in terms of performance, if the context is not specified with the live function. Context means you are setting the search limit within a specific node. If you don't specify the context with live function then it attaches the handler to the document by default and when executed it traverse through the DOM which causes a performance issue.

1	$(document).ready(function(){

2	$("#tblData td").live("click",function(){

3	alert('I am' + $(this).text());

4

});

5

});

In the above code, no context is specified so event gets attached to the document by default. It causes a huge performance issue. But with jQuery 1.4, you can specify the context with live function also.

1	$(document).ready(function(){

2	$("td",$("#tblData")[0]).live("click",function(){

3	alert('I am' + $(this).text());

4

});

5

});

You can check the difference with FireQuery add-on for Firefox. With delegate, the context is always specified.

1	$(document).ready(function(){

2	$("#tblData").delegate("td","click",function(){

3	alert('I am' + $(this).text());

4

});

5

});

Summary You can use any of these function but delegate function has advantage of performance, chaining issue and works for future created elements. Hope you find this article useful.