Как избежать многократного удаления при нажатии на кнопку отмены - PullRequest
Новая
       116

Как избежать многократного удаления при нажатии на кнопку отмены

1 голос
/ 19 марта 2020

У меня есть список записей с каждой строкой красного креста, чтобы удалить эту запись. Удаление идет нормально, но я замечаю некоторые нежелательные действия в модале подтверждения

Когда я нажимаю на красный крестик, чтобы удалить идентификатор записи 1, и я передумал, поэтому нажимаю кнопку Отмена. Но когда я хочу удалить запись 2 и нажимаю кнопку «Подтверждение», удаляются как запись 1, так и запись 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
  });
});

1 Ответ

1 голос
/ 19 марта 2020

Проблема в том, что вы вкладываете обработчики событий. Это означает, что, хотя вы отменяете модальность для первого удаления, события все равно привязаны к нему. Следовательно, в следующий раз, когда вы удалите строку, все ранее открытые модалы также будут удалять связанные строки.

Чтобы исправить это, используйте отдельные делегированные обработчики событий. Вы можете связать их со строками, используя атрибуты 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 является избыточным. Я бы предложил не делать этого.

...