Question

My html looks like this:

<div id="container">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
</div>

Then in javascript I set a click listener in the document ready function:

$(document).ready(function(){
    $('.sub').click(function (event) {
        //do something
    });
});

Later on I dynamically add more .class elements so my html looks like:

<div id="container">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>

    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
</div>

And I add the click listeners again:

function addListeners(){
  $('.sub').click(function (event) {
        //do something
    });
}

Now the first four .sub elements have two click handlers attached and they fire twice when clicked. Is there a better way to do this?

Answer 1

You can delegate the event:

$(document).ready(function(){
    $('#container').on('click', '.sub', function(event) {
        //do something
    });
});