global ajax handlers jquery

Question

i'm using global ajax handlers like

$(document).ajaxError(function(e, xhr, settings, exception) { 
});

$(document).ajaxStart(function(e, xhr, settings, exception) {
    $(".spinner").show();
})

$(document).ajaxComplete(function(e, xhr, settings, exception) {
    $(".spinner").hide();   
})

and it works well.

But i have some content which loaded from server by ajax, and with this content i'm loading some javascript which makes new ajax request. And when this ajax request start - global handlers not working :(

Answer 1

Description

You should use jQuery's live() or on() method to bind your handlers. This will work for new elements.

If you use jQuery 1.7 you should use the .on() method, if not use the .live()

Sample

live()

$(document).live("ajaxStart", function(e, xhr, settings, exception)  {
    $(".spinner").show();  
});

$(document).live("ajaxComplete", function(e, xhr, settings, exception)  {
    $(".spinner").hide();  
});

on()

$(document).on("ajaxStart", function(e, xhr, settings, exception)  {
    $(".spinner").show();  
});

$(document).on("ajaxComplete", function(e, xhr, settings, exception)  {
    $(".spinner").hide();  
});

More Information

• jQuery.live()
• jQuery.on()