jQuery event binding management

Question

Given the following elements:

<div class="container">
 <span class="some-class">content</span>
 ..n span repetitions..
</div>

Given the following .on()

$('.some-class').on('click', function () { ... });

If you redraw the .container with new span.some-class, will you leak the old events?

What I mean is, before the redraw, should you do:

$('.some-class').off('click');

Thanks!

• I.devries: you should check out event delegation: api.jquery.com/delegate

Answer 1

If you attach your event listener like this:

$(document).on({
 click: function () {
 // ...
 }
}, '.some-class');

Then your event listener will not "leak" as you put it. You can redraw, add additional elements with .some-class and they will all inherit the event listener. This has the added benefit of only registering one event listener instead of "x" listeners depending on how many .some-class elements there are. Much better performance.

• Pinoniq: It also adds the benefit of not having to perform a dom lookup