Question

我正在构建一个小应用程序，我有一些绑定到某些span标签的点击事件，这些标签触发对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.');}
            });             

    };

Answer 1

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

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

Answer 2

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

$("span").click(myHandlerFunction)

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

PS：最安全的方法是

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

jQuery AJAX请求在Click事件上重复

2 个答案: