jquery-ajax 成功：觸發兩次（jquery 3.5.1）

Question

我需要你的幫助。 我有這段代碼可以工作，但有時（它隨機發生）成功事件被觸發了兩次，我想了解為什么..請您幫我理解什么是錯的？

兩次觸發成功事件的“問題”是腳本似乎一次刪除多行而不是只刪除一行。

$(document).ready(function(){
  $(document).on('click', '.delc', function(e) {
    e.preventDefault();
    console.log("click");
    var id2 = $(this).closest(".delc").attr('rel');
    var item = $(this).parent().parent();
    data_2 = 'id=' + id2;
    $('#mdl-avviso-customer').modal('show');
    $('#del-btn-customer').on('click', function(e){
        e.preventDefault();       
        $.ajax({
          url: 'php/del_customer.php',
          type: 'post',
          data: data_2,
          cache: false,
          success: function(html){
            $(item).fadeOut(300,function(){
                $(item).remove();
              });
          }
        });
    });
  });
});

Answer 1

正確的代碼如下：

$(document).ready(function(){
      var id;
      var item;
      var data;
      $(document).on('click', '.delc', function(e) {
          e.preventDefault();
          console.log("click");
          id = $(this).closest('.delc').attr('rel');
          item = $(this).parent().parent();
          data = 'id=' + id;
          $('#mdl-avviso-customer').modal('show');
        });
        $('#del-btn-customer').on('click', function(e){
            e.preventDefault();     
            $.ajax({
              url: 'php/del_customer.php',
              type: 'post',
              data: data,
              cache: false,
              success: function(html){
                $(item).fadeOut(300,function(){
                    $(item).remove();
                  });
              }
            });
        });  
    });