Hello,

Most of the time we have a bit of confusion between the jQuery .bind(), .live(), .delegate(), and .on() methods and when they should be used. Here I am sharing some information regarding this:

bind() Method:
Syntax: .bind( eventType [, eventData ], handler(eventObject) )

It binds an event to the DOM element. The event type may be click, dblclick, mouseenter and so on. Event data contains the data that you want to pass to the handler. This method searches for all the DOM elements and attaches the same handler to all the elements found.

live() Method:
This method attaches the event handler to the root level element along with the selector to the event and event information. By this method we can use one event handler for all events that have delegated to it. Once an event has been delegated jQuery finds the selector to determine which handler it should call. This method is deprecated now.

delegate Method:
This method behaves like the .live() method, but the difference is that we can choose where the event handler is anchored instead of attaching the event handler to the document.

on Method:
This method can be used as both bind and delegate depending on the condition how it will be used.

.click(handler) == .on('click', handler)

.bind('click', handler) ==  .on('click', handler)

.delegate('click', '#id', handler) == .on('click', '#id', handler)

Example:

<ul id="items">
    <li>
        <a href="details.html">
            <h3>Gerry</h3>
            <p>some content</p>
            <p>some content</p>
        </a>
    </li>
</ul>

Using the bind Method:

$( "#items li a" ).bind( "click", function( e ) {} ); 
$( "#items li a" ).click( function( e ) {} ); 
/*The .click() method is just a shortcut to write the .bind() method. */

Using the Live Method:

$( "#items li a" ).live( "click", function( e ) {} );

Using the delegate Method:

 $( "#items" ).delegate( "li a", "click", function( e ) {} );
/*The selector and event information ( "li a" & "click" ) will be attached to the "#items" element. */

Using the on Method:

// Bind
$( "#items li a" ).on( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "#items li a", function( e ) {} ); 

// Delegate
$( "#items" ).on( "click", "li a", function( e ) {} );