jQuery Ajax多個調用

Question

我有一個jQuery代碼，在從表中刪除一條消息之前會彈出一個模式，但是即使您單擊“取消”並單擊另一條刪除消息，它仍然保留先前的ID，並刪除多條選定的消息

我在ajax成功函數上添加了id的console.log，它向我顯示了一個像一個一個地執行后單擊的每個刪除消息按鈕的ID

id-2 
xhr executed
id 3 
xhr executed 
id 4..... 

不間斷

$(function() {
  $(document).on('click', '.delete_message', function() {
    var element = $(this);
    var del_id = element.attr("id");
    var token = $("meta[name='csrf-token']").attr("content");

    $('#deletemessage').modal('show');
    $('#cnf_del').click(function() {
      var currentRequest = null;

      currentRequest = jQuery.ajax({
        type: 'get',
        url: "/messages_table/delete/" + del_id,
        data: {
          "id": del_id,
          "_token": token,
        },
        beforeSend: function() {
          if (currentRequest != null) {
            currentRequest.abort();
          }
        },
        success: function() {
          $('.id' + del_id).hide();
          $('#deletemessage').modal('hide');
          console.log(del_id);
        }
      });
    });
  });
});

我希望它停止保存前一個的ID及其執行

modal 
<!-- Modal for delete -->
<div class="modal fade" id="deletemessage" tabindex="-1" role="dialog" aria-labelledby="deletemessage" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Delete message</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete this message ?
        </div>
        <div class="modal-footer">
          <button type="button" id="cnf_del" class="btn btn-danger" >Delete</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

<table>
    @foreach  ($messages as $message)
        <tr><td class="id{{$message->id}}" >{{$message->id}}</td>
        <td id="show_name{{$message->id}}" class="id{{$message->id}}" >{{$message->name}}</td>
        <td id="show_email{{$message->id}}" class="id{{$message->id}}" >{{$message->email}}</td>
        <td id="show_email{{$message->id}}" class="id{{$message->id}}" >{{$message->message}}</td>
        <td class="id{{$message->id}}" >
             <button class="btn btn-danger delete_message id{{$message->id}}" data-target="deletemessage" id="{{$message->id}}">Delete</button>
        </td></tr>
    @endforeach 
</table>

Answer 1

使用隱藏字段可停止嵌套的Click偵聽器，並清除函數末尾的值。

每次單擊.delete_message元素時，都將為#cnf_del設置新的Click偵聽器。

我個人希望改變這種狀況。

一種方法是將新的隱藏輸入添加到模態中。

<input type="hidden" id="temp-id-holder" />

現在，當您單擊第一個刪除消息按鈕時，請設置以下字段：

$('#cnf_del').click(function() { 
  $('#temp-id-holder').val($(this).attr("id"));
});

現在，這是一個獨立的單擊偵聽器。

現在，您可以為確認按鈕創建另一個隔離的單擊偵聽器：

$('#cnf_del').click(function() {
 var currentRequest = null;
 var token = $("meta[name='csrf-token']").attr("content");
 var del_id = $('#temp-id-holder').val();
 currentRequest = jQuery.ajax({
   type: 'get',
   url: "/messages_table/delete/" + del_id,
   data: {
     "id": del_id,
     "_token": token,
   },
   beforeSend: function() {
    if (currentRequest != null) {
       currentRequest.abort();
     }
   },
   success: function() {
     $('.id' + del_id).hide();
     $('#deletemessage').modal('hide');
     $('#temp-id-holder').val('');
     console.log(del_id);
   }
 });

注意：在成功函數的末尾，我已經清除了該隱藏字段的值。 如果單擊“取消”按鈕，您可能還想做同樣的事情：

更改

<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

至

<button type="button" id="modal-close" class="btn btn-primary" data-dismiss="modal">Close</button>

並將以下內容添加到JS：

$('#modal-close').click(function(){
  $('#temp-id-holder').val('');
});

我也希望將所有這些都包裝在

$(document).ready(function(){ });

另外，如果您的_token數據僅是為了滿足laravel ajax安全性，那么您也可以在文檔准備好函數的開頭添加它：

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