為什么我的.on（）一鍵調用幾次

Question

我正在嘗試制作一個簡單的腳本，以在單擊時從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，它的行為就不會像這樣，但是所有的檢查都不會起作用。

這里有什么幫助嗎？

Answer 1

您每秒將對屏幕上的所有復選框應用相同的事件處理程序，因此，您每秒將根據屏幕上的復選框應用一定數量的事件處理程序。 另外，更不用說使用#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()循環中添加一個更改處理程序，它將每秒向所有現有復選框添加一個新的更改處理程序。 因此，它將多個更改處理程序綁定到復選框，因此，當復選框狀態更改時，將調用這些處理程序中的每個處理程序。

這里的解決方案是使用事件委托來添加對動態添加元素（例如，

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

演示： 小提琴

Answer 3

就像人們在評論中所說的那樣，您只能有一個具有相同ID的元素。 如果將ID更改為類，則樣式會更好。 之所以繼續發送輸入，是因為有setInterval（）。 它發送的次數是單擊之間的秒數。 我修改了小提琴，您可以在這里查看結果： http : //jsfiddle.net/ZWXjk/2/

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