jQuery ajaxStop Event

What You’ll Learn

The ajaxStop event fires when the last qualifying jQuery Ajax request completes — and only when no other global requests remain active. This tutorial covers binding on document with .on("ajaxStop"), pairing with ajaxStart for loading indicators, opting out with global: false, and comparing ajaxStop with per-request events like ajaxComplete.

Introduction

When your page loads data with $.ajax(), $.get(), or .load(), jQuery broadcasts lifecycle events to listeners on document. The ajaxStop event is your “all activity finished” hook — it fires once when the last active global Ajax request completes, giving you a single place to hide a loading spinner or re-enable navigation.

jQuery tracks how many global Ajax calls are in progress. When the count drops to zero, jQuery triggers ajaxStop. That pairing with ajaxStart — which fires when the count goes from 0 to 1 — makes ajaxStop ideal for page-wide loading UI without counting individual requests yourself. If the last outstanding request is cancelled via beforeSend returning false, ajaxStop still fires when no requests remain active.

Understanding the ajaxStop Event

ajaxStop is classified as an AjaxEvent — a global event triggered by jQuery’s Ajax transport, not a DOM event on a specific element. Whenever the last active global Ajax request finishes and no others remain, jQuery triggers ajaxStop on document. Handlers are simple callbacks with no extra arguments — unlike ajaxComplete, you do not receive jqXHR or settings.

The handler runs at the very end of global Ajax activity — after ajaxComplete on the last request, and after any success or error handlers. For per-request logging or response inspection, use ajaxComplete instead. For hiding the spinner when all requests finish, bind ajaxStop alongside ajaxStart.

📝 Syntax

The modern jQuery API for the ajaxStop global event:

1. Bind a handler — $(document).on("ajaxStop" [, handler]) (since 1.7)

$( document ).on( "ajaxStop", handler )

• handler — function invoked when the last global Ajax request completes: function() { ... } — no jqXHR or settings arguments.
• Fires only when no global requests remain in progress.
• Must attach to document since jQuery 1.9.

2. Official demo — document handler + .load() on click

$( document ).on( "ajaxStop", function() {
  $( ".log" ).text( "Triggered ajaxStop handler." );
} );
$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
} );

3. Official demo — hide loading message

$( document ).on( "ajaxStop", function() {
  $( "#loading" ).hide();
} );

Pair with ajaxStart to show the indicator when the first request begins.

4. Unbind — $(document).off("ajaxStop" [, handler])

$( document ).off( "ajaxStop" );              // remove all ajaxStop handlers
$( document ).off( "ajaxStop", myHandler );   // remove one handler

5. Deprecated method — .ajaxStop(handler)

// Deprecated — use .on("ajaxStop") instead
$( document ).ajaxStop( function() {
  $( "#loading" ).hide();
} );

The old .ajaxStop(handler) binding method still works but is deprecated since jQuery 3.5. Migrate to $(document).on("ajaxStop", handler). This page covers the ajaxStop event — not the deprecated shorthand method.

Return value

• .on("ajaxStop", handler) returns the jQuery object (document wrapped) for chaining.
• Handler return values are ignored by jQuery’s global Ajax event system.

Examples Gallery

Examples 1 and 2 follow the official jQuery API documentation. Examples 3–5 extend those patterns with parallel requests, global: false, and an ajaxStart + ajaxStop loading pair with ajaxStop as the focus. Use the Try-it links to run each snippet in the browser.

$( document ).on( "ajaxStop", function() {
  $( ".log" ).text( "Triggered ajaxStop handler." );
} );
$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
} );

User clicks .trigger → .load() sends Ajax request
When request completes → ajaxStop fires → .log shows "Triggered ajaxStop handler."
Works for $.ajax(), $.get(), $.post(), and .load()

$( document ).on( "ajaxStop", function() {
  $( "#loading" ).hide();
} );

Last Ajax request completes → #loading becomes hidden
Pair with ajaxStart to show when activity begins
Ideal for a page-wide spinner or "Loading..." banner

var stopCount = 0;
$( document ).on( "ajaxStop", function() {
  stopCount++;
  $( "#stop-count" ).text( stopCount );
} );
$( "#run-two" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
  $.get( "https://jsonplaceholder.typicode.com/posts/2" );
} );

Click #run-two → two parallel $.get() calls
stopCount increments by 1 (not 2)
ajaxComplete would fire twice — ajaxStop fires once per batch

var stopCount = 0;
$( document ).on( "ajaxStop", function() {
  stopCount++;
  $( "#log" ).append( " ajaxStop (" + stopCount + ")" );
} );
$( "#global-btn" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
} );
$( "#private-btn" ).on( "click", function() {
  $.ajax( {
    url: "https://jsonplaceholder.typicode.com/posts/2",
    global: false
  } );
} );

Click #global-btn → ajaxStop fires → log updated
Click #private-btn → request runs but ajaxStop does NOT fire
Private requests do not count toward active global batch

$( document ).on( "ajaxStart", function() {
  $( "#loading" ).show();
} );
$( document ).on( "ajaxStop", function() {
  $( "#loading" ).hide();
} );
$( "#run-two" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
  $.get( "https://jsonplaceholder.typicode.com/posts/2" );
} );

Click #run-two → #loading shows (ajaxStart once)
Both requests complete → #loading hides (ajaxStop once)
Spinner stays visible for entire parallel batch

🚀 Common Use Cases

• Loading spinners — hide a page-wide indicator when the last Ajax request completes; show it on ajaxStart.
• Re-enable navigation — unlock buttons or allow form submission when global Ajax activity ends.
• Activity badges — clear a “Loading…” status flag once per batch instead of per request.
• Analytics — record when a page-wide Ajax session ended (pair with ajaxStart for duration).
• Third-party isolation — set global: false on widget requests so they do not delay your ajaxStop UI.
• Testing — assert that a test harness left the “loading” state exactly once per batch.

📝 Notes

• Bind with $(document).on("ajaxStop", handler) since jQuery 1.7 — not the deprecated .ajaxStop(handler) method.
• Since jQuery 1.9, attach global Ajax handlers to document — not window.
• Fires only when no global requests remain in progress — not for every individual call.
• Handler receives no extra arguments — use ajaxComplete for jqXHR and settings.
• Always pair with ajaxStart when showing loading UI — otherwise nothing shows the indicator at the start.
• Requests with global: false do not trigger ajaxStop and do not count as active global requests.
• Multiple parallel requests share one ajaxStart / ajaxStop pair.
• If the last outstanding request is cancelled via beforeSend returning false, ajaxStop still fires when no requests remain active.

💡 Best Practices