多个点击监听器被添加到同一个 html 元素答案

【问题标题】：Multiple click listeners are being added to the same html element多个点击监听器被添加到同一个 html 元素
【发布时间】：2013-02-14 19:33:52
【问题描述】：

我的 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 元素附加了两个单击处理程序，并且在单击时会触发两次。有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以委托活动：

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

【讨论】：

确实，这就是委托的目的
委托。 @jose-calderon 这不是您要求的，但这是您在这种情况下应该做的。委托将事件处理程序附加到提供的根元素下的所有项目，甚至是新项目。

【解决方案2】：

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

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

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

【讨论】：

on != "委托"。可以使用on，但不能使用委托。
大部分答案似乎仍然暗示on = 委托。