如何防止重复发送ajax jQuery？

Question

我有一个按钮

<span class="btn btn-primary" id="open-label"><i class="icon-plus icon-white"></i> Add label</span> 

其打开模态窗口（http://twitter.github.com/bootstrap/javascript.html#modals）

<div id="ajax-labels"></div> 

<div id="labels-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="header">Add label</h3> 
    </div> 
    <div class="modal-body"> 
     <div class="control-group"> 
      <label class="control-label" for="name">Name</label> 
      <div class="controls"> 
       <input type="text" id="name"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="color">Color</label> 
      <div class="controls"> 
       <input type="text" id="color" name="color" value="#a5f3d4" size="6" class="iColorPicker" /> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="submit" class="btn btn-primary" id="submit-label"><i class="icon-ok icon-white"></i> Add label</button> 
    </div> 
</div> 

<script> 

function append_labels() { 
    $("#ajax-labels").empty(); 
    $.ajax({ 
     url: "/ajax", 
     type: "POST", 
     cache: false, 
     data: { 
      type: "get_labels" 
     }, 
     success: function (html) { 
      labels = $.parseJSON(html); 
      $.each(labels, function() { 
       $("#ajax-labels").append('<span class="label" id="' + this.id + '" style="background-color: ' + this.color + '">' + this.name + '<i id="edit-label" class="icon-pencil icon-white"></i></span> '); 
      }); 
     } 
    }); 
} 

$('span#open-label').click(function() { 
    $('#labels-modal').modal('show'); 
    $('#labels-modal #submit-label').click(function() { 
     $('#labels-modal #submit-label').prop('disabled', true); 

     var name = $('#labels-modal #name').val().trim(); 
     var color = $('#labels-modal #color').val().trim(); 

     if (name != '' || color != '') { 
      $.ajax({ 
       url: "/ajax", 
       type: "POST", 
       cache: false, 
       data: { 
        type: "add_label", 
        name: name, 
        color: color 
       }, 
       success: function() { 
        $('#labels-modal').modal('hide'); 
        append_labels(); 
       } 
      }); 
     } else { 
      return false; 
     } 
    }); 
}); 

</script> 

“添加标签”和jQuery发送请求填写标签，用户点击后，发送后，脚本关闭模态刷新（在ajax）标签列表。问题 - 如果用户快速点击“添加标签”，脚本将重复发送表单，并在数据库中响应双打。我如何防止这种情况？

Answer 1

禁用第一次点击时的表单和按钮，以便UI不允许其他点击。您可以手动执行此操作，或使用jQuery Block UI plugin。

下面是关于如何在另一个帖子此：jquery disable submit button on form submission

编辑：

您正在定义一个单击处理程序内部的事件处理程序。所以jQuery所做的是在每次包含点击被激发时分配该事件处理程序。因此，根据最高级别点击执行的次数，您的AJAX呼叫将触发多少次。即使只点击一下你的按钮，以前的点击也是罪魁祸首。将点击处理程序定义提取到另一个之外，你应该很好。

$('span#open-label').click(function() { 
    $('#labels-modal').modal('show'); 
}); 

$('#labels-modal #submit-label').click(function() { 
    $('#labels-modal #submit-label').prop('disabled', true); 

    var name = $('#labels-modal #name').val().trim(); 
    var color = $('#labels-modal #color').val().trim(); 

    if (name != '' || color != '') { 
     $.ajax({ 
      url: "/ajax", 
      type: "POST", 
      cache: false, 
      data: { 
       type: "add_label", 
       name: name, 
       color: color 
      }, 
      success: function() { 
       $('#labels-modal').modal('hide'); 
       append_labels(); 
      } 
     }); 
    } else { 
     return false; 
    } 
}); 

Answer 2

尝试使用one

$('span#open-label').one('click', function() { //... 

这将保证你的模式/ AJAX功能将只执行一次。

Answer 3

一下添加到单击处理程序

$('span#open-label').click(function() { 

    if(($(this).attr('clicked') == '1')) { 
    /* do something else then */ 
    return; 
    } 
    $(this).attr('clicked', '1'); 

    $('#labels-modal').modal('show'); 

这样一来，下一次你点击你能告诉警报。

如果你想“重新激活”“开放性”，你只是这样做：

$('span#open-label').attr('clicked', '0');