Using bind vs on for dynamic elemnts

Benchmark created on

Description

This is to test the performance between adding dynamic elements and using jQuery bind() to manually bind each time an element is added and adding dynamic elements but using jQuery on() ones binding to the container, specifying the dynamic elements selector.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="filters">
</ul>​

Test runner

Ready to run.

Testing in
TestOps/sec
Using bind()
for (var counter = 1; counter < 11; counter++) {
    var $newItem = $("<li>List Item " + counter + "</li>")
    $("#filters").append($newItem);

    $newItem.bind("click", function() {
        $(this).remove();
    });
};

//Clear the list again
$("#filters").html("");
ready
Using on()
$("#filters").on("click", "li", function() {
    $(this).remove();
});

for (var counter = 1; counter < 11; counter++) {
    var $newItem = $("<li>List Item " + counter + "</li>")
    $("#filters").append($newItem);
};

//Clear the list again
$("#filters").html("");
$("#filters").off("click");
ready

Revisions

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