javascript - jQuery AJAX 请求在单击事件上重复

Question

我正在构建一个小型应用程序，我有一些点击事件绑定(bind)到一些 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

您可能多次绑定(bind) matOption 函数。

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