jQuery ajaxSuccess Event

What You’ll Learn

The ajaxSuccess event fires when a qualifying jQuery Ajax request succeeds — not on failure. This tutorial covers binding on document with .on("ajaxSuccess"), the handler signature (event, jqXHR, ajaxOptions, data), filtering by ajaxOptions.url, reading xhr.responseText and the parsed data argument, opting out with global: false, and comparing global events with per-request .done().

Introduction

When your page loads data with $.ajax(), $.get(), $.post(), or .load(), jQuery broadcasts lifecycle events to listeners on document. The ajaxSuccess event is your global “request succeeded” hook — it fires only when a qualifying request completes successfully.

The official jQuery API distinguishes the ajaxSuccess event (bound with .on("ajaxSuccess") since 1.7) from the deprecated .ajaxSuccess() method used in older code. Unlike ajaxComplete, which runs for both success and failure, ajaxSuccess is outcome-specific — failed requests trigger ajaxError instead. On successful requests, ajaxSuccess runs before ajaxComplete.

Understanding the ajaxSuccess Event

ajaxSuccess is classified as an AjaxEvent — a global event triggered by jQuery’s Ajax transport, not a DOM event on a specific element. Whenever an Ajax request completes successfully, jQuery triggers ajaxSuccess on document. Handlers receive four arguments: the native event object, the jqXHR object, ajaxOptions — the settings used to create the request — and data, the processed response (parsed JSON, HTML fragment, etc.).

Every registered ajaxSuccess handler runs for every successful qualifying request. Read the raw body with jqXHR.responseText or use the fourth argument data when jQuery has already parsed it. To react only to certain URLs, inspect ajaxOptions.url inside the handler.

📝 Syntax

The modern jQuery API for the ajaxSuccess global event:

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

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

• handler — function invoked when any qualifying Ajax request succeeds: function( event, jqXHR, ajaxOptions, data ) { ... }.
• event — the jQuery event object.
• jqXHR — the jqXHR / XMLHttpRequest object; read jqXHR.responseText for the response body.
• ajaxOptions — settings passed to $.ajax() (url, type, data, context, etc.).
• data — processed response data (parsed JSON, HTML, text) based on dataType.

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

$( document ).on( "ajaxSuccess", function() {
  $( ".log" ).text( "Triggered ajaxSuccess handler." );
} );

$( "#fetch" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
} );

3. Filter by URL — inspect ajaxOptions

$( document ).on( "ajaxSuccess", function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSuccess handler. The result is " +
      xhr.responseText );
  }
} );

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

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

5. Deprecated method — .ajaxSuccess(handler)

// Deprecated — use .on("ajaxSuccess") instead
$( document ).ajaxSuccess( function( event, xhr, settings ) {
  console.log( "Request succeeded:", settings.url );
} );

The old .ajaxSuccess(handler) binding method still works but is deprecated. Migrate to $(document).on("ajaxSuccess", handler) for consistency with other events and reliable unbinding via .off().

Return value

• .on("ajaxSuccess", 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, 3, and 4 follow the official jQuery API documentation. Examples 2 and 5 extend those patterns with URL filtering and a success-only comparison with a failing request. Use the Try-it links to run each snippet in the browser.

$( document ).on( "ajaxSuccess", function() {
  $( ".log" ).text( "Triggered ajaxSuccess handler." );
} );

$( "#fetch" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
} );

User clicks #fetch → $.get() runs Ajax request

When request succeeds → .log shows "Triggered ajaxSuccess handler."

Failed requests do not trigger ajaxSuccess — use ajaxError instead

$( document ).on( "ajaxSuccess", function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSuccess handler. The result is " +
      xhr.responseText );
  }
} );

Request to ajax/test.html completes → .log shows handler message + responseText

Request to other URLs → handler runs but if-block skipped


Use settings.type, settings.context, or custom keys to filter further

$( document ).on( "ajaxSuccess", function( event, request, settings ) {
  $( "#msg" ).append( " Successful Request! " );
} );

Each successful Ajax request → #msg gains " Successful Request! "

Three parallel successful requests → three appended messages


Failed requests do not append — only successes trigger ajaxSuccess

var globalCount = 0;

$( document ).on( "ajaxSuccess", function() {
  globalCount++;
  $( "#log" ).append( " ajaxSuccess (" + globalCount + ")" );
} );

$( "#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 → ajaxSuccess fires → log updated

Click #private-btn → request completes but ajaxSuccess does NOT fire

Per-request .done() on the private call still runs

var successCount = 0;

$( document ).on( "ajaxSuccess", function() {
  successCount++;
  $( "#log" ).text( "ajaxSuccess count: " + successCount );
} );

$( "#ok" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
} );

$( "#fail" ).on( "click", function() {
  $.get( "https://httpbin.org/status/404" );
} );

Click #ok → ajaxSuccess count goes to 1

Click #fail → request fails → count stays at 1

ajaxError fires instead; ajaxComplete still runs after the failure

Use ajaxSuccess when you only care about successful responses

🚀 Common Use Cases

• Success toasts — show “Saved successfully” when ajaxSuccess fires for form submissions.
• Analytics hooks — send timing or URL data to monitoring when ajaxSuccess fires, filtered by settings.url.
• Cache warming — prefetch related data when a list endpoint succeeds globally.
• Response inspection — read xhr.responseText in a global handler for logging (avoid parsing large bodies on every request in production).
• Third-party isolation — set global: false on widget requests so they do not trigger your global ajaxSuccess logic.
• Testing — assert that a test harness saw the expected number of successful requests via a global counter.

📝 Notes

• Bind with $(document).on("ajaxSuccess", handler) since jQuery 1.7 — not the deprecated .ajaxSuccess(handler) method.
• Since jQuery 1.9, attach global Ajax handlers to document — not window.
• ajaxSuccess fires only on success — before ajaxComplete, which runs for both outcomes.
• Every registered handler runs for every successful qualifying request.
• Requests with global: false do not trigger ajaxSuccess.
• Read the response with jqXHR.responseText (official docs use parameter name xhr).
• Use the fourth argument data for parsed JSON when dataType: "json".
• Differentiate requests with ajaxOptions.url, ajaxOptions.type, or custom settings properties.
• For per-request success UI, prefer $.ajax(...).done(fn) over a global handler with heavy filtering.

💡 Best Practices