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() 之间的区别在于.click()在添加与.click()事件关联的DOM元素时可能无效稍后动态调整，而.on()可用于与.on()调用关联的DOM元素可能在以后动态生成的情况。

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

2 个答案: