Subscribe to the 'complete' event of a .load() on a specific DOM element?

Question

Hi all,

I already use both .live() and .bind('ajaxComplete') to accomplish certain related tasks, but I have found myself wanting to be able to listen for the 'complete' event of a specific DOM element which will call jQuery's .load() at various times.

In this situation I don't want to listen for ALL complete events globally (unless someone can show me how to get the proper target from the event object returned by 'ajaxComplete'). I would like to be able to do something like this:

$('.selector').load('url.php',{data:data},function(){
   // LOCAL complete function
});

and then somewhere else, attach a handler to listen and execute some other code whenever that ajax call fires and completes:

$('.selector').bind('complete',function(){ ... });

I know that I can use what I indicated above as the "LOCAL complete function" to attach some functionality, but I would like to be able to bind to the complete event from elsewhere in my code - much like I do with other events such as 'click'.

Is there any way to do this? Or must i always make use of the 'complete' event within the context of the load() method?

Answer 1

You were close on your example, see the .load() documentation at jQuery. http://api.jquery.com/load/

$('.selector').load('url.php',function() {
    //Complete function
});

Answer 2

something like ?

• ajaxComplete : Register a handler to be called when Ajax requests complete. This is an Ajax Event.

$('.selector').ajaxComplete(function() {
  //do something...
});

and of course for all the Global Ajax Event Handlers:

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Answer 3

Just trigger the complete event in your local complete callback:

$('.selector').load('url.php',{data:data},function(){
   $(this).trigger('complete');
   // Local handling of the complete event.
});

$('.selector').bind('complete',function(){ ... });