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请求重复点击事件

回答

相关问题