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

虽然您只提供了部分代码，但如果您使用的是bootstrap模式，那么您的怀疑可能是正确的：每次单击按钮时，都会向＃modal-delete-confirm添加新的单击处理程序 - 但现有的点击处理程序仍然存在。即使您单击三次相同的按钮，并将模式三次关闭，三个点击处理程序也会附加到按钮上。

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

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

列表记录删除确认问题

1 个答案: