jQuery Ajax多个调用

Question

I have a jquery code that pop ups a modal before deleting a message from table but even if u click cancel and click on another delete message it still pretains previous ones id and deletes multiple selected messages

i added console.log on the ajax success function for id and it showed me the ids of every delete message button clicked after executing it one by one like

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

non stop

$(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);
        }
      });
    });
  });
});

I want it to stop saving the previous one's id and its execution

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

Use a hidden field to stop nested click listeners and clear the value at the end of the function.

You are setting a new click listener for #cnf_del each time you click on a .delete_message element.

I would personally look to change this.

One way to do this would be to add a new hidden input to your modal.

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

Now when you click on the first delete message button, set this field:

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

This is now a single isolated click listener.

You can now create another isolated click listener for the confirm button:

$('#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);
   }
 });

Note: I have cleared the value of that hidden field at the end of the success function. You may also want to do the same if the cancel button is clicked:

change

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

to

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

and add the following to the JS:

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

I would also look to wrap all of this around a

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

Also, if your _token data is just to satisfy the laravel ajax security, then you could also just add this at the start inside the document ready function:

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