Question

Im building a small application and I have some click events binded to some span tags that trigger AJAX requests to a PHP file which queries a MySQL database and spits out the results to populate the targeted area.

However, sometimes i will be clicking the buttons and I have conditionals in place to stop multiple clicking to prevent duplicate content being added numerous times.

I click on a button and firebug tells me that the ajax request had actioned more than once, sometimes it will multiply – so it will start by doing it 2 times or another time it will carry our the request 8 times on one click and obviously flood my content area with duplicate data.

Any ideas?

EDIT

Code for a button is as follows:

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

This would be enabled by

$('.btn').bind('click', matOption);

and this would be controlled by something like this

    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

You’re probably binding your matOption function more than once.

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