表格式记录的删除确认问题

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