单击取消按钮时如何避免多次删除

Question

我有一个记录列表，每行都有一个红叉来删除这条记录。删除正常，但我注意到确认模式中有一些不需要的行为

当我点击红叉删除记录 ID 1 时，我改变了主意，所以我点击了取消按钮。但是当我想删除记录2时，我点击确认按钮，记录1和2都被删除了，但我只想删除记录2。

有什么想法可以防止我之前在模式中的取消按钮上的确认按钮前单击时删除 2 条记录吗？

$(document).on("click", ".delete_item", function(e) {
  e.preventDefault();
  var user_id = $(this).attr('data-user_id');
  var text_modal = "Are you sure?";
  $('.modal-body').text(text_modal);
  $('#modal-delete').modal('show');

  $('.confirmation').on('click', function() {
    $.ajax({
      type: 'GET',
      url: 'delete.php',
      data: {
        'user_id': user_id
      },
      success: function(html) { // Removing entire row
        $('.ui-sortable li[data-itemid="' + user_id + '"]').remove();
        location.reload();
      }
    });
  });

  $('.cancellation').on('click', function() {
    // Something to prevent double deleting
  });
});

Answer 1

问题是因为您嵌套了事件处理程序。这意味着虽然您取消了第一次删除的模式，但事件仍然绑定到它。因此，下次您删除一行时，所有先前打开的模式也将删除它们的相关行。

要解决此问题，请使用单独的委托事件处理程序。您可以使用 data 属性将它们与行相关联，如下所示：

$(document).on("click", ".delete_item", function(e) {
  e.preventDefault();
  var user_id = $(this).data('user_id');
  $('.confirmation, .cancellation').data('user_id', user_id);
  $('.modal-body').text("Are you sure?");
  $('#modal-delete').modal('show');
});

$(document).on("click", '.confirmation', function() {
  let user_id = $(this).data('user_id');
  $.ajax({
    type: 'GET',
    url: 'delete.php',
    data: { user_id: user_id },
    success: function(html) { // Removing entire row
      $('.ui-sortable li[data-itemid="' + user_id + '"]').remove();
      location.reload();
    }
  });
});

$(document).on("click", '.cancellation', function() {
  let user_id = $(this).data('user_id');
  // do something...
});

这里还有一些其他事项需要注意。首先使用 data() 到 get/set data 属性，而不是 attr()。其次，调用 delete.php 使用 DELETE HTTP 动词会更有意义。最后，如果您要在 AJAX 调用之后调用 location.reload()，那么整个 AJAX 调用都是多余的。我建议不要那样做。

单击取消按钮时如何避免多次删除

How to avoid multiple delete when clicking on a Cancellation button

jquery

modal-dialog

cancellation

confirmation