为什么我的.on()在一次点击中被调用了好几次?

Why does my .on() get called several times on one click

本文关键字：调用 好几次 一次 on 我的 为什么      更新时间：2023-09-26

我试图做一个简单的脚本，从DOM删除复选框时，他们被点击。我必须把它放在循环中因为我要以设定的间隔轮询一些数据。这会导致这个脚本出现一些奇怪的问题:

JsFiddle

HTML: 

<label class="delete">
    <input type="checkbox" checked="" id="checkdelete" name="261"> 
</label>
    <label class="delete">
    <input type="checkbox" checked="" id="checkdelete" name="261"> 
</label>
        <label class="delete">
    <input type="checkbox" checked="" id="checkdelete" name="261"> 
</label>
Javascript: 

var queueInterval = setInterval(function() {
    $('input#checkdelete').on('change', function(){
        console.log($(this).attr('name'));
      $(this).parent('.delete').remove();  
    });  
}, 1000);

如您所见，如果您单击一个复选框，它将向控制台输出看似随机数量的调用。这很糟糕，因为我实际上是在点击复选框后做一个。post()，每次点击它都会被调用很多次。

当它在循环之外时，没有问题。如果我给每个复选框一个唯一的ID它不会像这样，但所有的复选框都不起作用。

有什么帮助吗?

这里的问题是，您在setInterval()循环中添加一个更改处理程序，它将每秒向所有现有的复选框添加一个新的更改处理程序。因此，它将绑定多个更改处理程序到复选框，因此当复选框状态更改时，每个处理程序都将被调用。

这里的解决方案是使用事件委托来添加对动态添加元素的支持，如 
var queueInterval = setInterval(function () {
    //do what ever else you want to do here
}, 1000);
//use checkdelete as a class not as an id because ID of an element must be unique
$(document).on('change', '.checkdelete', function () {
    console.log($(this).attr('name'));
    $(this).parent('.delete').remove();
});

演示:小提琴

每秒钟你将应用相同的事件处理程序所有复选框在屏幕上，所以每秒钟你将应用一些事件处理程序基于屏幕上的复选框。此外，更不用说，使用#id选择器应该是唯一的。对于在页面上多次出现的项使用类处理程序。

查看这里的代码:http://jsfiddle.net/notsoluckycharm/ZWXjk/1/

它更清晰地分离了你的关注点。您还可以使用一个容器来附加标签/复选框，并且该容器将处理事件委托。

$('div').on('change', 'input', function(){
    $(this).parent('.delete').remove(); 
});
var queueInterval = setInterval(function() {
   $(".container").append('<label class="delete"> '
    <input type="checkbox" checked="" id="checkdelete" name="261">'
   </label>');
}, 1000);

正如人们在评论中所说，您应该只有一个具有相同ID的元素。如果您将ID更改为类，这是更好的样式。它持续发送输入的原因是setInterval()。它发送的次数是你点击之间的秒数。我修改了你的小提琴，你可以在这里看到结果:http://jsfiddle.net/ZWXjk/2/

$('input.checkdelete').on('change', function(){
    console.log($(this).attr('name'));
    $(this).parent('.delete').remove();  
});
相关文章：