live-vs-on (v5)

Revision 5 of this benchmark created on

Description

Comparison of jQuery live() and on() methods when binding to the same event on multiple elements.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="live">
live
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
</div>
<div id="on">
on
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
</div>
<div id="bind">
bind
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
</div>

Setup

var update = function(e) {
        $(this).html('foo');
        }

Test runner

Ready to run.

Testing in
TestOps/sec
live()
$('#live ul li').live('click', update);
ready
on
$('#on ul').on('click', 'li', update);
ready
bind
$('#bind ul li').bind('click', update);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.