jQuery ajax 在一次点击中发送多个请求

Question

我不知道我的代码出了什么问题，当我点击发送按钮发送电子邮件时，它会发送多个重复的电子邮件。在另一个页面中使用相同的jQuery和HTML代码来删除文件，一切正常。我做错了什么吗？ jQuery:

$(document).on('click','.sendwork',function(e){
    $('#spinner').show();
    var sendWork = $(this).data('id');

    var res         = sendWork.split("-");
    var comment_id  =  res[0];
    var status      =  res[1];
    var order_id    =  res[2];
    var td = $(this).closest("td").andSelf();

    $.ajax({
        type:'POST',
        url:'{!! URL::to('admin/sendwork/') !!}',
        cache: false,
        data:{
         '_token'   : '{{ csrf_token() }}',
         'comment_id':comment_id,
         'status':status,
         order_id:order_id,
        },
        success: function(data){
            $('#spinner').hide();
            if (data == 'true') {
                // $('.email-resp').html('');
                td.html('Email Sent');
            }

        },
        error:function(data){
            $('#spinner').hide();
            td.html('<p style="color:red; font-weight:bold;">Fail</p>');
        }
    });

 });

html:

<table class="table table-compact table-bordered">

    <tr>
        <th width="10"></th>
        <th width="30">Date</th>
        <th width="20">User</th>
        <th width="20">Status</th>
        <th width="450">Comment</th>
        <th width="100">Files</th>
    <th width="30">Action</th>
    </tr>

    <tr>
        <td><a class="del-comment" href="javascript:void(0)" data-token="XyjbZEsvbfTnurM0OnRP75k049Re0dPpLynRqUe6" id="217"><span style="color:red;" class="glyphicon glyphicon-remove"></span></a> </td>
        <td>01-Apr-15</td>
        <td width="30">hy</td>
        <td>Completed</td>
        <td width="42" align="left"><p>sdf</p></td>
        <td>
            <a href="/uploads/PE10_1427882386_0.png" target="_blank" alt="PE10_1427882386_0.png" title="PE10_1427882386_0.png"><i class="fa fa-picture-o"></i></a>                  </td>
        <td><a href="javascript:void(0)" class="btn btn-small btn-success sendwork" data-id="217-Completed-LEH1000">Send</a></td>
    </tr>

</table>

- Muhammad Hamza Younas

---

检查 $(document).off('click').on('click', 相关的编程内容 - Nishit Maheta

".sendwork"类有多少个元素？ - Abhi

在HTML中sendWork在哪里？ - Aravind Sivam

在这里只有一个带有“sendwork”类的按钮... - Muhammad Hamza Younas

发送工作存储数据ID值 - Muhammad Hamza Younas

请确保您只在HTML中包含此代码一次。尝试在函数中添加一些console.log，看它打印了多少次。从这部分代码很难确定问题所在。 - Tien Nguyen

Answer 1

$(document).off('click').on('click', function(){
   //
});

将会生效

- Tiger

---

它能够工作，但是当模态框关闭后，除非需要刷新页面，否则不会打开另一个模态框。 - Muhammad Hamza Younas

Answer 2

在我的情况下有帮助的是，在调用方法后添加e.stopImmediatePropagation()：

$(document).on('click','.sendwork',function(e){
    e.stopImmediatePropagation();
    ...
});

- CamiEQ

Answer 3

$(document).on('click', '.sendwork',function(event) {
    event.stopImmediatePropagation();
    // this will help
});

$("#form").on('submit' ,function(event) {
    event.stopImmediatePropagation();
    // this help me in same issue
}

- Yasir Minhaj

Answer 4

问题已解决，我只是改变了代码：

表单

$(document).on('click','.sendwork',function(e){

到

$('.sendwork').on('click',function(e){

- Muhammad Hamza Younas

Answer 5

尝试这个。

$(document).on('click','.sendwork',function(e){
   // do some thing
});

- hy_sultani

---

这与问题中提到的jQuery有何不同？ - Pardhu

Answer 6

我通过在$.ajax的.done(function(data)事件中添加$(‘#foo’).unbind(‘click’);解决了我的问题。谢谢！

解决方案在这里：http://eligeske.com/jquery/jquery-sending-multiple-ajax-requests-all-by-itself-kind-of/

- Mizael Clistion

Answer 7

这段代码对我非常好用。

$('.class').unbind().bind('eventName', method);

- Awais Jameel

Answer 8

使用 async:false 来防止多次请求

$(document).off('click').on('click', function(){
    $.ajax({
        type:'POST',
        url: ,
        async:false,
        cache: false,
        data:{}
         ,
        success: function(data){

        },
        error:function(data){
        }
    });   

});

- Rahman Rezaee