jQuery .ajaxComplete() Method

What You’ll Learn

The .ajaxComplete() method is jQuery’s legacy shorthand for binding global ajaxComplete handlers on document. This tutorial covers $(document).ajaxComplete(handler), the handler signature (event, jqXHR, ajaxOptions), why binding must target document since 1.9, migration to .on("ajaxComplete") and cleanup with .off("ajaxComplete"), and why the method is deprecated since jQuery 3.5. Unlike .click(), there is no trigger variant — only binding. For the modern ajaxComplete event API, see the jQuery ajaxComplete event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), global Ajax events had matching shorthand methods — .ajaxStart(), .ajaxSend(), .ajaxComplete(), and others. The .ajaxComplete(handler) method let you register a page-wide “request finished” callback in one short call: $(document).ajaxComplete(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated since 3.5.

Understanding .ajaxComplete() matters when reading older admin panels, legacy jQuery plugins, and tutorials written before .on("ajaxComplete") became standard. Unlike DOM event shorthands such as .click(), .ajaxComplete() has only a binding form — there is no no-argument trigger variant. Modern jQuery binds the same global event explicitly: $(document).on("ajaxComplete", handler). This page documents the shorthand API and shows how to migrate.

Understanding the .ajaxComplete() Method

The official jQuery API describes .ajaxComplete() as a way to register a handler to be called when Ajax requests complete. When you pass a function, jQuery registers it on document and calls it after every qualifying Ajax request finishes — whether the server returned 200 or the call failed. That is the same ajaxComplete global event that .on("ajaxComplete") handles today.

The handler receives three arguments even though the API signature lists only handler: event (the jQuery event object), jqXHR (the XMLHttpRequest wrapper — read jqXHR.responseText for the body), and ajaxOptions (the settings object passed to $.ajax()). Requests with global: false still opt out — they do not trigger .ajaxComplete() handlers.

📝 Syntax

The .ajaxComplete() method has one signature from the official jQuery API — binding only. There is no trigger form unlike .click():

1. Bind a handler — .ajaxComplete( handler ) (deprecated since 3.5)

$( document ).ajaxComplete( handler )

• handler — function invoked when any qualifying Ajax request completes. Official docs list Function(); the callback actually receives function( event, jqXHR, ajaxOptions ) { ... }.
• Must attach to document since jQuery 1.9 — not window or other elements.
• Returns the jQuery object (document wrapped) for chaining.
• Modern replacement: $( document ).on( "ajaxComplete", handler ).

2. Official jQuery API migration note

// Deprecated binding
$( document ).ajaxComplete( function( event, xhr, settings ) {
  console.log( "Request finished:", settings.url );
} );

// Modern binding
$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
  console.log( "Request finished:", settings.url );
} );

// Remove handler — use .off(), not .unbind()
$( document ).off( "ajaxComplete", myHandler );

3. Unbind — $(document).off("ajaxComplete" [, handler])

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

Do not use deprecated .unbind("ajaxComplete") in new code. Store a named function reference when you need to remove a specific handler later.

Return value

• .ajaxComplete(handler) returns the original jQuery object for chaining.
• Handler return values are ignored by jQuery’s global Ajax event system.

Examples Gallery

Five examples cover basic binding, reading xhr.responseText, legacy logging, migration from .ajaxComplete() to .on("ajaxComplete"), and removing handlers with .off(). Use the Try-it links to run each snippet in the browser. Remember: binding with .ajaxComplete(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( document ).ajaxComplete( function() {
  $( ".log" ).text( "Handler ran via .ajaxComplete(function(){ ... })." );
} );

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

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

When request completes → .log shows handler message

Works for $.ajax(), $.get(), $.post(), and .load()

Deprecated — prefer .on("ajaxComplete", fn) for new code

var targetUrl = "https://jsonplaceholder.typicode.com/posts/1";

$( document ).ajaxComplete( function( event, xhr, settings ) {
  if ( settings.url === targetUrl ) {
    $( ".log" ).text(
      "URL: " + settings.url + " | responseText: " +
      xhr.responseText.substring( 0, 100 ) + "..."
    );
  }
} );

Request to posts/1 completes → .log shows URL + responseText snippet

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

Official docs use parameter names xhr and settings

$( document ).ajaxComplete( function( event, request, settings ) {
  $( "#msg" ).append( " Request Complete. " );
} );

Each qualifying Ajax request → #msg gains " Request Complete. "

Three parallel requests → three appended messages

Ideal for a simple activity log or debug strip

// Legacy — deprecated since jQuery 3.5
$( document ).ajaxComplete( function() {
  $( "#out" ).text( "Legacy: .ajaxComplete(function(){ ... })." );
} );

// Modern — use for new code
$( document ).on( "ajaxComplete", function() {
  $( "#out" ).text( "Modern: .on('ajaxComplete', function(){ ... })." );
} );

Both handlers fire when $.get() completes

Legacy message from .ajaxComplete(fn)

Modern message from .on("ajaxComplete", fn)

Behavior is identical — only the API name differs

var count = 0;

function onComplete() {
  count++;
  $( ".log" ).text( "Handler active — ajaxComplete count: " + count );
}

$( document ).ajaxComplete( onComplete );

$( "#remove" ).on( "click", function() {
  $( document ).off( "ajaxComplete", onComplete );
  $( ".log" ).text( "Handler removed — count stays " + count + "." );
} );

Run $.get() → count increments

Click Remove → .off("ajaxComplete", onComplete)

Next $.get() completes but handler no longer runs — count unchanged

🚀 Common Use Cases

• Reading legacy code — recognize $(document).ajaxComplete(fn) as equivalent to .on("ajaxComplete", fn) in older admin panels.
• Activity logging — legacy debug panels append “Request complete” via .ajaxComplete() — migrate to .on() when refactoring.
• Response inspection — read xhr.responseText in a global handler for development logging.
• URL filtering — compare settings.url inside .ajaxComplete(fn) before updating the DOM.
• SPA teardown — remove global handlers with .off("ajaxComplete", fn) when unmounting a view.
• Third-party isolation — requests with global: false still opt out of .ajaxComplete() handlers.

📝 Notes

• Deprecated since jQuery 3.5 — do not use $(document).ajaxComplete(handler) in new code. Use .on("ajaxComplete") instead.
• Attach to document since jQuery 1.9 — not window or other elements.
• Binding only — no no-argument trigger form unlike .click() or .mousedown().
• Handler receives (event, jqXHR, ajaxOptions) even though the API lists handler as Function().
• Remove handlers with $(document).off("ajaxComplete", handler) — not .unbind("ajaxComplete").
• Requests with global: false do not trigger .ajaxComplete() handlers.
• Legacy code using .ajaxComplete() still runs in jQuery 3.x — migrate when you refactor those files.
• For event order, comparison with .always(), and the complete modern workflow, see the jQuery ajaxComplete event tutorial.

💡 Best Practices