Apr 27

jquery useful function

Explain .bind() vs .live() vs .delegate() vs .on()

All Above Method used for attaching events to selectors or elements. But they all are different from each other.

.bind(): This easiest method to bind events. The .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements, so those elements must exist at the point the call to .bind() occurs. But the issue with bind() is that it doesn’t work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.

Example :

$( "#foo" ).bind( "click", function() {
alert( "foo event is active" );

This code is show alert when use click inside the “foo” ID Elements.
.bind() method can be also used for multiple event.
$( "#foo" ).bind( "mouseover mouseout", function() {
$( this ).toggleClass( "hovercolor" );

1. It is easy to bind event handler.
2. This method work with almost all browser.
3. When event fires the event handler is invoked almost immediately.
1. The method attached the same event handler to match every element in the selection.
2. It doesn’t work for elements added dynamically that matched the same selector.
3. The performance issue when dealing with large selection.
4. It is also have performance issue on page loading due to attachment done upfront.

.live(): This method overcomes the disadvantage of bind(). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Instead of .live method we can use .on method in jQuery upper version.
Syntax :
$(selector).live(event, data, handler)
Example :
$( "a" ).live( "click", function() {
return false;

1. Element Dynamically added to the DOM that match the selector magically.
2. It is used before document ready element which help to save utilize time.
3. Upgrade .bind() to .live() is very easy.
1. Poor performance large document.
2. Channing method is not supported.
3. The method depreciate in jQuery 1.7 and removed in 1.9

.delegate(): The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored and it also supports chaining. Delegate method has been superseded by the .on() method in jQuery 1.7.

Syntax :
$(elements).delegate(selector, events, data, handler)
$( "table" ).delegate( "tr", "click", function() {
$( this ).toggleClass( "clkclass" );

1. Delegate Method is very powerful because event handler is unordered list along with the selector/ event information.
2. Channing is supported.
3. It can be also work with dynamically added elements to the DOM.
4. It is also used before the document ready event.
1. Changing from .bind() to .delegate() is not straight forward.

.on():Attach an event handler function for one or more events to the selected elements. Since live was deprecated with 1.7, so new method was introduced named “.on()”. This method provides all the goodness of previous 3 methods and it brings uniformity for attaching event handlers. This method is replacement of .bind() , .live() and .delegate().

$(selector).on(event, handler)

$( "#tid tbody tr" ).on( "click", function() {
alert( $( this ).text() );

A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level.
$( "#tid tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );

1. .on method cover the all three method .bind(), .live() and .delegate().
2. Brings uniformity to the various event binding methods.
1. Behavior based on the process of method call.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>