Question

我正在尝试创建一个简单的脚本，以便在单击DOM时删除DOM中的复选框。我必须在循环中使用它，因为我以设定的间隔轮询一些数据。这会导致此脚本出现一些奇怪的问题：

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，它不会像这样，但所有检查都不起作用。

这里有任何帮助吗？

Answer 1

每秒你都会将相同的事件处理程序应用于 ALL 屏幕上的复选框，因此每一秒你都会根据上面的复选框应用一些事件处理程序。屏幕。另外，更不用说使用#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);

Answer 2

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

此处的解决方案是使用event delegation添加对动态添加元素（如

）的支持

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();
});

演示：Fiddle

Answer 3

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

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

为什么我的.on（）会在一次点击中被多次调用

3 个答案: