Javascript jqueryajax请求点击重复事件

我正在构建一个小应用程序，我将一些单击事件绑定到一些span标记，这些span标记触发对PHP文件的AJAX请求，该PHP文件查询MySQL数据库并输出结果以填充目标区域

但是，有时我会单击按钮，并且我有适当的条件来停止多次单击，以防止重复内容被多次添加

我点击一个按钮，firebug告诉我ajax请求已经执行了不止一次，有时它会成倍增加——因此它将开始执行2次，或者另一次，它将在一次点击中执行我们的请求8次，显然，我的内容区域中充斥着重复的数据

有什么想法吗

编辑

按钮的代码如下所示：

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

这将由这样的东西控制

    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.');}
            });             

    };

var-matOption=function（）{
$（this.addClass（'active'）；
//如果对材料改变主意，请去除颜色
如果（$（'#selectedcolor'）.val（）>=1）{
$（'.color'）.slideUp（500.children（）.remove（）；
$（'#selectedcolor'）.val（''）；
$（'.matColOpt.btn'）.html（'Material color'）.removeClass（'active'）.css（'opacity'，0.55）；
$（'.btn'）.eq（2）.取消绑定（'click'，colOption）；//将单击添加到颜色
$（#阶段h1 span'）。等式（2）。衰减（500）；
$（'.paperOpt.btn'）.css（'opacity'，0.55）。取消绑定（'click'，selectPaper）；
}   
//ajax要求提供可用材料
var cid=$（'#selectedcolor'）.val（）；
var target=$（'notebookOpts.matOpt-ul'）；
$.ajax({
键入：“获取”，
url:ajaxFile+“？方法=getMaterials”，
beforeSend:function（）{if（$（'.mats'）.children（'li'）.size（）>=1）{return false；}}，
成功：功能（数据）{
target.append（数据）.slideDown（500）；
$（'.mats li'）.bind（'click'，matSelect）；
},
错误：函数（）{alert（'发生意外错误！请重试。'）；}
});             
};

如果有一个代码重复地将事件处理程序绑定到DOM元素，那么该事件处理程序就会在事件上重复执行。所以如果你的代码是这样的

$("span").click(myHandlerFunction)

执行三次，然后您刚刚告诉jQuery在每次单击span时触发myHandlerFunction三次。最好确保代码中没有这样的条件。如果这不是真的，那么请张贴您的代码，以便我可以进一步帮助

PS：最安全的方法是

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

---

您可能不止一次绑定了matOption函数

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

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