.ajaxComplete keeps stacking up

Question

Hello again,

I've discovered something interesting. I'm using ajax in a carousel structure to add more items to the end when needed. And it seems to work just fine.

This would be the ajax call inside a function called ItemLoad():

$.ajax({
    type: "POST",
    url: ajax_url,
    data: args,
    success: function(resp){
        $('#dumpster').append(resp);
    } 
});

Another function calls ItemLoad() when the carousel has reached it's end

itemLoad();

$slider.ajaxComplete( function() {

    console.log("ajaxdone");

    //items get inserted into the DOM

});

When I run this, I get one "ajaxdone" at the first request, then two at the second, then three... basicly the ajaxComplete events stack up or something so the code runs to many times instead of just one.

WHat am I missing?

Answer 1

You keep adding the same event to the ajaxComplete stack each time in the itemLoad event. Not that easy to tell as you have not given the full script.

Bind the ajaxComplete event once in doc ready and do not add it every time.