Info

The Difference Between jQuery’s .bind(), .live(), and .delegate()

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function handler() {
        $('p').text("CLICK !");
}
</script>
<p>Event</p>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$('p').bind('click', handler);

$('p').live('click', handler);

$('p', $(document)[0]).live('click', handler);

$(document).delegate('p', 'click', handler);

$(document).on('click', 'p', handler);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Rochas on 19th December 2012 and last updated on 20th December 2012
• Revision 2: published on 20th December 2012
• Revision 3: published by Rochas on 28th December 2012
• Revision 4: published by Rochas on 30th December 2012
• Revision 5: published by Rochas on 31st December 2012
• Revision 6: published on 1st January 2013
• Revision 7: published on 9th January 2013
• Revision 8: published on 13th January 2013

1 comment