Using Delegate and Undelegate in jQuery

Using delegate and undelegate in jQuery, you can bind or remove a handler from the event for all elements that matches the current selector.

Basically, these methods achieve the same thing as the jQuery .live() and .die() methods but they just use a different syntax.

Syntax of Delegate:

$(selector).delegate(childSelector,event,data,function)

Example of jQuery Delegate:

$(“table”).delegate(“td”, “hover”, function(){

$(this).toggleClass(“hover”);

});

For more details about jQuery .delegate click here.

Event handlers attached using the jQuery .delegate() method will work for both current and FUTURE elements also.

Syntax of Undelegate:

$(selector).undelegate(selector,event,function)

Example of jQuery Undelegate:

$(“table”).undelegate(“td”, “hover”);

For more details about jQuery .undelegate click here.

The syntax of .bind() and .delegate() is a little different.

$(‘ul li’).bind(‘click’, function(e){

// Do something with bind

});

$(‘ul’).delegate(‘li’, ‘click’, function(e){

// Do something with delegate

});

Hence, the difference between .bind() and .delegate() is that .bind() will only add events to the elements that are on the current page when you call it but .delegate() is looking for new or dynamic elements and then adding events to them when they appear on the page.