Вызов Ajax выполняется несколько раз одним щелчком мыши

Question

Когда я нажимаю на #deleteCustomerButton, подтверждаю модальные шоу. Если я подтвержу #delete, он запускает вызов ajax, удаляет клиента из БД и удаляет строку из HTML.

Проблема заключается в том, что когда я выбираю удалить другого клиента (без перезагрузки страницы) и подтвердить удаление, он дважды запускает вызов ajax. Если я выбираю другого клиента delete, ajax называется 3 раза и так далее. Я не знаю, где он рассчитывает :(

Мой HTML таблице:

<table class="table table-striped table-bordered table-hover" id="dataTables-customers"> 
        <thead> 
         <tr> 
          <th>ID</th> 
          <th>Jméno</th> 
          <th>Adresa</th> 
          <th>Email</th> 
          <th>Telefon</th> 
          <th>Akce</th> 
         </tr> 
        </thead> 
        <tbody> 

         @foreach ($customers as $customer) 

         <tr id="customer{{ $customer->id }}"> 
          <td>{{ $customer->id }}</td> 
          <td>{{ $customer->first_name }} {{ $customer->last_name }}</td> 
          <td>{{ $customer->street }}, {{ $customer->zip }} {{ $customer->city }}</td> 
          <td>{{ $customer->email }}</td> 
          <td>{{ $customer->telephone }}</td> 
          <td> 
           <div class=""> 
            <button class='btn btn-danger btn-xs deleteCustomer deleteCustomer{{$customer->id}}' data-loading-text="Pracuji..." id="deleteCustomerButton" data-id="{{ $customer->id }}" value="{{ $customer->id }}"><span class="fa fa-times"></span> Vymazat</button> 
            <button class="btn btn-success btn-xs editCustomerButton editCustomerButton{{$customer->id}}" id="editCustomerButton" data-id="{{ $customer->id }}" value="{{ $customer->id }}" data-loading-text="Pracuji...">Upravit</button> 
           </div> 
          </td> 
         </tr> 

         @endforeach 

        </tbody> 
       </table> 

режимное окно:

<div class="modal fade" id="confirmDeleteCustomerModal" role="dialog" tabindex="-1"> 
<!-- <div class="modal-dialog"> --> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="close">&times;</i></button> 
      <h4 class="modal-title"> Vymazat zákazníka</h4> 
     </div> 
     <div class="modal-body"> 
      Opravdu chcete odstranit zákazníka ze systému? 
     </div> 
     <div class="modal-footer"> 
      <button type="button" data-dismiss="modal" class="btn btn-danger delete" id="cancel">Zpět</button> 
      <button type="button" data-dismiss="modal" class="btn btn-success" data-loading-text="Pracuji..." id="delete">Odstranit</button> 
     </div> 
    </div> 
</div> 

И, наконец, моя функция JQuery:

$('#dataTables-customers').on('click', '#deleteCustomerButton', function(){ 

customerId = $(this).val(); 
console.log(customerId); 
$('.deleteCustomer' + customerId).button('loading'); 

$('#confirmDeleteCustomerModal').modal({ backdrop: 'static', keyboard: true }).on('click', '#delete', function(){ 
    deleteUrl = customerId + '/delete'; 

    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
     } 
    }) 

    console.log(deleteUrl); 
    $.ajax({ 
     type: "DELETE", 
     url: 'customer/' + customerId + '/delete', 
     success: function (data) { 
      //console.log(deleteUrl); 
      console.log(data); 

      $("#customer" + customerId).remove(); 
      $('.deleteCustomer').button('reset'); 

      return $.growl.notice({ 
       message: "Zákazník odebrán ze systému", 
       location: "br" 
      }); 
     }, 
     error: function (data) { 
      console.log('Error:', data); 
      return $.growl.error({ 
       message: "Chyba", 
       location: "br" 
      }); 
     } 
    }); 
}); 

$(".modal").on("hidden.bs.modal",function(){ 
    $('#newCustomerForm').trigger('reset'); 
    $('.deleteCustomer').button('reset'); 
}); 

});

Может кто-нибудь помочь мне выбраться из этой проблемы? Большое спасибо.

Answer 1

Вы можете добавить Flag, например:. DELETING

var DELETING = false; /* Flag declaration */ 

$('#dataTables-customers').on('click', '#deleteCustomerButton', function(){ 

customerId = $(this).val(); 
console.log(customerId); 
$('.deleteCustomer' + customerId).button('loading'); 

$('#confirmDeleteCustomerModal').modal({ backdrop: 'static', keyboard: true }).on('click', '#delete', function(){ 
    deleteUrl = customerId + '/delete'; 

    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
     } 
    }) 

    console.log(deleteUrl); 

    if(!DELETING){ /* checking */ 
     DELETING = true; /* assign flag to true, so we cannot delete again */ 
     $.ajax({ 
      type: "DELETE", 
      url: 'customer/' + customerId + '/delete', 
      success: function (data) { 
       DELETING = false; /* deleted ok, assign flat to false so we can delete again */ 
       //console.log(deleteUrl); 
       console.log(data); 

       $("#customer" + customerId).remove(); 
       $('.deleteCustomer').button('reset'); 

       return $.growl.notice({ 
        message: "Zákazník odebrán ze systému", 
        location: "br" 
       }); 
      }, 
      error: function (data) { 
       DELETING = false; /* error, assign flat to false so we can delete again */ 
       console.log('Error:', data); 
       return $.growl.error({ 
        message: "Chyba", 
        location: "br" 
       }); 
      } 
     }); 
    } 

}); 

Answer 2

$('#confirmDeleteCustomerModal').modal({ backdrop: 'static', keyboard: true }).on('click', '#delete', function (e){ 
    e.stopImmediatePropagation(); // or e.stopPropagation(); 
... 
} 

Вы предотвратите его образование пузырьков DOM.