Question

So this is really a two-part question: why isn’t it working, and should I even bother?

I have an ajax application that uses a lot of jquery’s .load() and .get(). In my global js file I’ve added these lines to test jQuery’s global ajaxComlete function:

$('body').ajaxComplete(function(e){
    alert();
});

I’m not getting any alerts when the ajax runs throughout the application. Does anyone know why?

The reason I want this is because I have a lot of styles that are applied through class names, and every ajax load essentially clears the old classes and brings in new classes. This removes my styling. So I have a global function called styleForm() that reapplys all my styles. I call this function in every individual ajax callback. ie:

$.get('source.cfm',funcion(){
    styleForm();
});

I know having this global ajax function will produce what most would probably consider ‘clearner’ code. But would it impact the performance much? If so, I don’t want to do that. If not, then I’d like to get this working.

Answer 1

Have you tried binding the ajaxComplete to $(document)?

In our code we use $.ajaxSetup({}), $(document).ajaxStart(function(){}) and $(document).ajaxStop(function(){}).

The reason you need to use $(document):

$.get is basically shorthand for $.ajax which will will trigger the ajax events (.ajaxComplete, .ajaxError, etc.) on document.

$('body').ajaxComplete will only trigger if you have bound an ajax event to it or a lower dom element. Usually this means something like $('<header>').load('http://www.example.com');