JQuery Bind v/s Live v/s Delegate v/s On comparison matrix

	Bind	Live	Delegate	On
Min version required	1.0	1.3	1.4.2	1.5
Recommended	No	Absolute No	Yes	Of course Yes!
DOM changes considertion	No	Yes	Yes	Yes
Custom Events	Yes	Yes	Yes	Yes
Readability	Good	Good	V. Good	V. Good
Cross-Browser	Yes	Yes	Yes	Yes
Revert	Unbind()	Die()	Undelegate()	Off()
Cancel Event Propagation	Yes	No	Yes	Yes
Shortcuts	Yes	No	No	No

Meaning of Labels
- Min Version: Minimum JQuery version that supports this event binder
- Recommended: Recommendation by JQuery site and other prominent community members
- Dom Change Consideration: Does this event binder respects elements  dynamically added later (More on this below)
- Custom Events: Does it allows to trigger custom events (other than standard ones like click etc.)
- Readibility: How easy is it to read and understand what's script doing (bit subjective)
- Cross Browser: Is it cross browser compatible?
- Revert: Corresponding method to undo event binding
- Cancel Event Propagation: Is it possible to cancel event bubbling in bound function (More on this below)
- Shortcuts: Are there code shortcut syntax for this (For example .bind('click',fx) is same as .click(fx)

Understanding the concept of "DOM changes consideration"

Consider following HTML and script

<button id="btnAdd">Add Button</button>
<div id="container">
    <button class="alert">Alert</button>
    <button class="alert">Alert</button>
</div>
​

And the JQuery Script:

$(function(){
    //Whenever a button with class "alert" is clicked, alert "Hi"
    $('.alert').click(function(){alert('hi')});
    
    //Whenever "Add Button" is clicked, add a new alert button
    $('#btnAdd').bind('click', function(){
         $('#container').append('<button class="alert">Alert</button>');
    });                                     
});​

This renders following:

If we click on any of the 2 alert buttons, browser would alert "hi" message. If we click on "Add Button", a new button with same HTML will be added.
Important: This is where we are dynamically adding new object to HTML DOM. The new button wasn't there when the HTML was initially loaded and JQuery was binding click function to existing 2 buttons. So, the query is "If I click this new alert button (dynamically added) will it too make an alert because it too has "alert" class?
Answer is: Bind - NO, Live - Yes, Delegate - Yes, On - Yes
This is what "DOM changes consideration" is.

Try this out here. Just change the code by replacing  "bind" with other event binders, RUN and see the difference.


Understanding the concept of "Cancel Event Propagation"
Consider following HTML

<div id="outer">
outer content
<button id="button">inside</button>
</div>

and following JS

$(function(){
  $('#outer').click(function(){alert('div clicked');});
  $('#button').bind('click',function(e){
          alert('btn clicked')
          return false;
  });
});
​

There is a button "btnInside" placed inside a div called "outer". Both buttons are bind with click event to alert some text. If "return false" line is not present in function that triggers on button click, you will see 2 alerts "btn Click" and then "div clicked". This is event propagation. An event propagates upward in dom hierarchy causing to trigger all click events. However, putting "return false" or e.stopPropagation() cancels this bubbling. Hence if you run above code only one alert will appear "btn clicked". If you change bind to live (with return false included), opposed to your expectation both the alerts will trigger in reverse order. WHY? This is because live function causes bubbled events to trigger before calling context function. This issue is only with live. Rest all event binders perform alike. You can try this here.

CodeProject