jQuery ajaxStart works only on the first request

That's how ajaxStart works, from the docs:

Description: Register a handler to be called when the first Ajax request begins

I think you should show and hide the loader for each ajax call manually, call $( "#loader" ).show(); before the ajax call and then use the complete option of the ajax to hide it , like this:

$( "#loader" ).show(); $.ajax({ type: "POST", url: url, data: data, success: function(msg) { //stuffs }, complete: function() { $( "#loader" ).hide(); } }); 

Edited:

If you don't want to edit your ajax requests, maybe you could try ajaxSend() and ajaxComplete(), which are supposed to be executed for all ajax calls, instead of ajaxStart() and ajaxStop():

 $(document).ajaxSend(function() { $( "#loader" ).show(); }); $(document).ajaxComplete(function(){ $( "#loader" ).hide(); }); 

As Ruben suggested AjaxSend and AjaxComplete is the way to go.

But another problem is, since the AjaxComplete is called after every ajax request is completed, it hides the loading div just after first ajax request. But the desired behavior should be that the loading div hides after all the ajax requests are completed.

How can we achieve that you ask? Simple! In the AjaxComplete check if there are no pending ajax requests before hiding the div.

 $(document).ajaxSend(function() { $( "#loader" ).show(); }); $(document).ajaxComplete(function(){ if ($.active === 1) { $( "#loader" ).hide(); } }); 

Use .ajaxComplete() instead of .ajaxStop()

.ajaxComplete() - runs for every request that completes, use this when you want to do something with each request/result. Note that this doesn't replace the success handler, since the parsed data is not one of the arguments (and it runs even when there's an error) - you may want .ajaxSuccess() in some per-request situations instead.

.ajaxStop() - runs when every batch of requests completes, usually you'd use this in combination with .ajaxStart() for things like showing/hiding a "Loading..." indicator of some sort - or to do something else once a batch of AJAX requests finishes, like a master last step.

$(document).ajaxStart(function() { $( "#loader" ).show(); }); $(document).ajaxComplete(function(){ $( "#loader" ).hide(); }); 

UPDATE:-

DEMO