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!

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.