一次单击多次调用jquery函数

Question

我有多个具有相同类名和不同ID的按钮。但是当我单击按钮时，每次都会被调用多个。有关实际代码的信息，请观看视频：https://nimb.ws/3RMoNP

这是我的代码

$(document).on("click", ".delete_attachment_confirmation", function(e){
    e.preventDefault();

    var attachment_id = $(this).data('attachmentid');
    $('#delete_attachment_confirmation_'+attachment_id).attr("disabled", true);
    $('#delete_attachment_confirmation_'+attachment_id).text("Deleting file");


    $.ajax({
      url: "<?php echo base_url('attachment/delete_attachment/')?>"+$(this).data('attachmentid'),
      type: "GET",  
      dataType: "text",
      success: function(data){

        $("#row_"+attachment_id).remove();

        $("#attachment_message_body").text(data);

        $('#delete_attachment_'+attachment_id).modal('hide');

        // attachment message
        $('#attachment_message').modal('show');

        // modal issue removal trick
        $('.modal-backdrop').removeClass('modal-backdrop');

      }
    }); 
});


<button class="btn btn-danger delete_attachment_confirmation" id="delete_attachment_confirmation_<?=$row->id?>" data-attachmentid="<?=$row->id?>" ><?php echo $this->lang->line('btn_modal_delete');?>

更新的按钮代码

<button class="btn btn-danger delete_attachment_confirmation" id="delete_attachment_confirmation_<?=$row->id?>" data-attachmentid="<?=$row->id?>" ><?php echo $this->lang->line('btn_modal_delete');?>

突出显示的部分向我们展示了ajax函数被多次调用的情况。

Answer 1

上面的JS代码中没有什么导致它运行两次，只是该按钮没有关闭标签，而多个按钮没有关闭标签并且具有相同的类可能是原因，我只是在代码段中运行了代码，运行正常。

<button class="btn btn-danger delete_attachment_confirmation" id="delete_attachment_confirmation_<?=$row->id?>" data-attachmentid="<?=$row->id?>" ><?php echo $this->lang->line('btn_modal_delete');?></button>

https://codepen.io/balramsinghindia/pen/OJLzjbo

Answer 2

我使用了此问题中提供的解决方案。

Ajax, prevent multiple request on click

Answer 3

  $(".classNamw").unbind().click(function() {
//Your stuff
  })