javascript - 多个点击监听器被添加到同一个 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

您可以委托(delegate)该事件:

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