多个单击侦听器正被添加到同一个html元素中

Question

我的HTML看起来像这样:

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

然后在javascript中我在文档就绪函数中设置了一个单击监听器:

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

稍后我动态添加更多.class元素,所以我的html看起来像:

<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>

然后我再次添加点击监听器:

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

现在前四个.sub元素连接了两个点击处理程序,点击时它们会点击两次.有一个更好的方法吗？

Answer 1

您可以委派活动:

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