如何防止重複發送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');