jQuery AJAX Request Repeating on Click event

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;
}

Answer 2

If you have a code that binds an event handler to a DOM element repeatedly then that event handler does gets executed repeatedly on the event. so if your code such

$("span").click(myHandlerFunction)

gets executed thrice, then you have just told jQuery to fire myHandlerFunction thrice on every click of span. It would be good to make sure there is no such condition goign on in your code. If that is not true then please post your code so that I can help further.

PS: The safest way to do this will be as

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