列表记录删除确认问题

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>  

查询：

//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-confirm - 但现有的点击处理程序仍然存在。即使您单击同一个按钮 3 次，并关闭模式 3 次，按钮也会附加三个单击处理程序。

我只会添加一次点击处理程序，然后以某种方式将数据传递给按钮，例如

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