AjaxComplete often called

Question

I have this code:

$( document ).ajaxComplete(function( event, xhr, settings ) { console.log('test'); }); 

I opened the chrome network tab and I see only one entry (status 200).

But the console displays:

 (28) test 

Why is this done often?

Answer 1

ajaxComplete starts when any AJAX request is completed, even if it is successful or not.
200 status code means your request went right, but since you can read jQuery docs so that the callback fires every time the AJAX request is completed.

So, you can check which URL redirects your request and only process the ones you need.

In any case (note side only) I will use the AJAX complete built-in callback function, something like this:

 $.ajax({ url: url, data: { data }, complete:function(){ console.log('test'); } }); 

Answer 2

You can check the URLs of these ajax'es and handle only the necessary ones:

 $( document ).ajaxComplete(function( event, xhr, settings ) { console.log('Ajax request completed for: ' + settings.url); if ( settings.url === "ajax/test.html" ) { $( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseText ); } }); 

Bind it only once when the document is ready:

 $(function() { $( document ).ajaxComplete(function( event, xhr, settings ) { console.log('Ajax request completed for: ' + settings.url); if ( settings.url === "ajax/test.html" ) { $( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseText ); } }); });