Learning jQuery

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.

$(document).ready(function(){         
  $("#dvContainer")children("table").find("tr").live("click",function(){
         alert('I am' + $(this).text());
  });
});

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

$(document).ready(function(){         
  $("#dvContainer")children("table").delegate("tr","click",function(){
         alert('I am' + $(this).text());
  });
});

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.

$(document).ready(function(){         
  $("#tblData td").live("click",function(){
         alert('I am' + $(this).text());
  });
});

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.

$(document).ready(function(){         
  $("td",$("#tblData")[0]).live("click",function(){
         alert('I am' + $(this).text());
  });
});

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

$(document).ready(function(){         
  $("#tblData").delegate("td","click",function(){
         alert('I am' + $(this).text());
  });
});

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.

UPDATED:
As you might be knowing that jQuery 1.7 is already released and the live() method is deprecated by jQuery team. So if you are using live then please stop using it. With jQuery 1.7, a new method called "ON" is introduced which is combination of bind, live and delegate method.

Read my post to find out "How to use jQuery on() and off() method"

Read my other posts:

Feel free to contact me for any help related to jQuery. I will gladly help you.