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

您可以委托事件：

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

Answer 2

在这种情况下，您应该使用On()而不是click()此处。所以，您的代码得到

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

.on()和之间的区别在于.click()，当与事件关联的 DOM 元素在以后动态添加时可能不起作用，而可以.click()在与调用关联的 DOM 元素可能在以后动态生成的情况下使用。.click().on().on()