jQuery AJAX 请求在 Click 事件上重复答案

【问题标题】：jQuery AJAX Request Repeating on Click eventjQuery AJAX 请求在 Click 事件上重复
【发布时间】：2011-03-04 17:16:15
【问题描述】：

我正在构建一个小型应用程序，我有一些点击事件绑定到一些跨度标签，这些标签触发对 PHP 文件的 AJAX 请求，该文件查询 MySQL 数据库并吐出结果以填充目标区域。

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

我点击一个按钮，firebug 告诉我 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.');}
            });             

    };

【问题讨论】：

标签： javascript jquery ajax xhtml

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您的代码将事件处理程序重复绑定到 DOM 元素，则该事件处理程序确实会在事件上重复执行。所以如果你的代码这样

$("span").click(myHandlerFunction)

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

PS：最安全的方法是

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

【讨论】：