表格式記錄的刪除確認問題

Question

HTML：

<td>random_data_1</td><td><button id="random_data_1"></button></td> 
<td>random_data_2</td><td><button id="random_data_2"></button></td> 
<td>random_data_3</td><td><button id="random_data_3"></button></td> 

JQUERY：

//document.ready 
$('button[id^="random_data_"]').on('click', function() { 
    $('#modal').modal('show'); 
    $('#modal-delete-confirm').on('click', function() { 
     $.ajax({ 
      ... 
     }); 
    }); 
}); 

我有這樣的代碼，我的問題是：

我每次觸發一個按鈕打開模態在沒有確認刪除操作的情況下駁回所述模式（其唯一目的是確認刪除操作）...讓我們假設：#random_data_1被觸發但被駁回，#random_data_2，當我確認#random_data_3時，所有3條記錄都被確認刪除。

這是爲什麼這樣表現？我懷疑事件的實例被重複，一旦確認，所有實例都會被執行。我錯了嗎？因爲好像ajax調用被觸發多次，具體取決於觸發了多少點擊事件（綁定到按鈕[id^= random_data_]）。

Answer 1

儘管您只提供了一部分代碼，但如果您使用的是引導模式，那麼您的懷疑可能是正確的：每次單擊某個按鈕時，都會將新的點擊處理程序添加到＃modal-delete-確認 - 但現有的點擊處理程序仍然保留。即使您單擊三次相同的按鈕並關閉模式三次，三個點擊處理程序也會附加到該按鈕上。

我只會將點擊處理程序添加一次，並將數據以某種方式傳遞給按鈕，例如，

$('button[id^="random_data_"]').on('click', function() { 
    $('#modal-delete-confirm').data('which', this.id); 
    $('#modal').modal('show'); 
}); 

$('#modal-delete-confirm').on('click', function() { 
    var which = $(this).data('which'); 
    if (typeof which == 'undefined') { 
     console.log('How could this possibly happen?'); 
     return; 
    } 
    console.log("has to delete " + which); 
    // Now do the thing based on the value of which 
});