JQuery AJAX-запрос повторяется при событии Click

Question

Я создаю небольшое приложение, и у меня есть несколько событий click, связанных с некоторыми тегами span, которые инициируют запросы AJAX к файлу PHP, который запрашивает базу данных MySQL и выплевывает результаты, чтобы заполнить целевую область.

Однако иногда я буду нажимать на кнопки, и у меня есть условия, чтобы остановить многократное нажатие, чтобы предотвратить повторное добавление контента много раз.

Я нажимаю на кнопку, и firebug сообщает мне, что ajax-запрос действовал более одного раза, иногда он будет умножаться - поэтому он начнется, выполнив это 2 раза, или в другой раз, когда он выполнит наш запрос 8 раз одним щелчком мыши. и, очевидно, заполнить мою область контента дубликатами данных.

Есть идеи?

EDIT

Код для кнопки выглядит следующим образом:

<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)