时间戳

首页 > 解决方案 > 单击取消按钮时如何避免多次删除

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

问题描述

我有一个记录列表，每行都有一个红十字以删除该记录。删除工作正常，但我注意到确认模式中有一些不需要的行为

当我点击一个红十字以删除记录 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
  });
});

标签： jquerymodal-dialogcancellationconfirmation

解决方案

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

要解决此问题，请使用单独的委托事件处理程序。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()获取/设置data属性，而不是attr(). delete.php其次，调用使用 DELETE HTTP 动词会更有意义。最后，如果您要location.reload()在 AJAX 调用之后进行调用，那么 AJAX 调用的整个要点都是多余的。我建议不要这样做。

推荐阅读