jQuery AJAX請求重複點擊事件

即時通訊構建一個小應用程序，我有一些點擊事件綁定到一些跨度標籤，觸發對查詢MySQL數據庫的PHP文件的AJAX請求，並吐出結果來填充目標區域。jQuery AJAX請求重複點擊事件

但是，有時我會點擊按鈕，並且有條件停止多次點擊以防止重複的內容被多次添加。

我點擊一個按鈕，螢火蟲告訴我，ajax請求已經多次執行，有時它會繁殖 - 所以它會開始做2次或其他時間，它會將我們的請求8次點擊並顯然氾濫我的內容區域與重複的數據。

任何想法？

編輯

代碼按鈕如下：

<span class="btn"><b>Material</b></span>

這將通過

$('.btn').bind('click', matOption);

啓用，這將通過類似的控制這

var matOption = function() { 
     $(this).addClass('active'); 

     // remove colours if change of mind on materials 
     if($('#selectedColour').val() >= 1) {  
      $('.colour').slideUp(500).children().remove(); 
      $('#selectedColour').val(''); 
      $('.matColOpt .btn').html('<b>Material Colour</b>').removeClass('active').css('opacity', 0.55);  
      $('.btn').eq(2).unbind('click', colOption); // add click to colour 
      $('#stage h1 span').eq(2).fadeOut(500); 
      $('.paperOpt .btn').css('opacity', 0.55).unbind('click', selectPaper); 
     } 

     // ajax req for available materials 
     var cid = $('#selectedColour').val(); 
     var target = $('#notebookOpts .matOpt ul');  

      $.ajax({ 
       type: "GET", 
       url: ajaxFile+"?method=getMaterials", 
       beforeSend: function() {if($('.mats').children('li').size() >= 1) { return false; }}, 
       success: function(data) { 
        target.append(data).slideDown(500); 
        $('.mats li').bind('click', matSelect); 
       }, 
       error: function() {alert('An unexpected error has occurred! Please try again.');} 
      });    

    };

來源

2011-03-04 Nathan Fitzgerald - Fitzgenius

你可能結合您的matOption功能不止一次。

if(!window.matOptionBound){ 
    $('.btn').bind('click', matOption); 
    window.matOptionBound = true; 
}

來源

2011-03-04 18:03:19 mwilcox

如果您有一個將事件處理程序重複綁定到DOM元素的代碼，那麼該事件處理程序會在該事件上重複執行。所以，如果你的代碼

$("span").click(myHandlerFunction)

被執行三次，那你剛纔告訴jQuery來三次火myHandlerFunction上跨度的每一次點擊。確保在代碼中不存在這樣的情況是很好的。如果這不是真的，那麼請發佈您的代碼，以便我可以進一步幫助。

PS：做最安全的方法將作爲

$("span").unbind("click",myHandlerFunction).bind("click",myHandlerFunction)

來源

2011-03-04 17:20:34 Nikhil

感謝您的快速響應 - 看看我的編輯。 – 2011-03-04 17:33:14

jQuery AJAX請求重複點擊事件

回答

相關問題