jQuery .ajaxComplete() Method

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .ajaxComplete()?

.ajaxComplete(handler) is jQuery’s legacy shorthand (since 1.0) for binding a global Ajax “request finished” handler on document. It runs after every qualifying request — success or error. Internally it is sugar for .on("ajaxComplete", handler).

Remember
// Deprecated (since 3.5)
$(document).ajaxComplete(function (event, jqXHR, ajaxOptions) {
  // runs after every qualifying Ajax request finishes
});

// Modern replacement
$(document).on("ajaxComplete", handler);

// Bind only — no no-arg .ajaxComplete() trigger form
// Opt out: $.ajax({ url: "/x", global: false })
NeedUse
New code$(document).on("ajaxComplete", fn)
Legacy bind$(document).ajaxComplete(fn) ⚠
Remove handler$(document).off("ajaxComplete", fn)
Success onlyajaxSuccess
Error onlyajaxError
Approach

How to Use .ajaxComplete()

Recognize the legacy call, know its three handler arguments, and migrate to .on() / .off().

  1. Attach the handler to document with .ajaxComplete(handler) (legacy) or .on("ajaxComplete", handler) (preferred).
  2. Make requests with $.ajax(), $.get(), $.post(), or .load().
  3. Optionally filter with ajaxOptions.url and read jqXHR.responseText.
  4. Remove with .off("ajaxComplete", handler) — not .unbind().
  5. Use global: false on requests that must stay silent.
PieceRequired?Role
documentYes (1.9+)Only valid bind target for global Ajax events
handlerYesfunction(event, jqXHR, ajaxOptions)
ajaxOptions.urlOptionalFilter which requests you react to
global: falseOptionalSkip all global Ajax events for that call

Pseudocode

Pseudocode
call $(document).ajaxComplete(handler)
    → internally: $(document).on("ajaxComplete", handler)

when a jQuery Ajax request finishes:
    if request.global === false:
        do not fire ajaxComplete
        return

    fire ajaxSuccess or ajaxError first
    fire ajaxComplete
        for each registered handler:
            call handler(event, jqXHR, ajaxOptions)

to migrate:
    replace .ajaxComplete(fn) with .on("ajaxComplete", fn)
    remove with .off("ajaxComplete", fn)
Reference

Cheat Sheet

Quick map from legacy shorthand to modern APIs.

TopicDetail
Legacy bind$(document).ajaxComplete(handler) ⚠ deprecated 3.5
Modern bind$(document).on("ajaxComplete", handler)
Unbind$(document).off("ajaxComplete" [, handler])
Signaturefunction(event, jqXHR, ajaxOptions)
WhenEvery finished request (success + error)
SinceMethod 1.0 · document-only 1.9+ · deprecated 3.5
Trigger formNone — bind only (unlike .click())
Opt outglobal: false in $.ajax() / $.ajaxSetup()
Try it

Live Preview

Run a real $.get() and watch the legacy .ajaxComplete() handler update the log.

Demo uses deprecated .ajaxComplete() plus a public JSON API. Needs network access.

Result
Ready — pick an action and click Run.
Code

jQuery Examples

Short, copy-ready snippets using the legacy shorthand. Prefer .on("ajaxComplete") for new projects.

Example 1 — Basic $(document).ajaxComplete(fn)

Canonical legacy pattern: log when any Ajax request completes after a click.

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

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

How It Works

  1. Bind. .ajaxComplete(fn) on document registers a global handler.
  2. Delegate. jQuery routes it to .on("ajaxComplete", fn) internally.
  3. Click. $.get() starts a qualifying Ajax request.
  4. Complete. When the request finishes, the log updates.

Example 2 — Filter by settings.url

Handlers run for every request — narrow them with the settings object.

jQuery
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) + "..."
    );
  }
});
Try It Yourself

How It Works

  1. Args. jQuery passes event, xhr, and settings.
  2. Compare. Check settings.url against the endpoint you care about.
  3. Read. Use xhr.responseText for the raw response body.
  4. Skip. Non-matching URLs leave your UI alone.

Example 3 — Append “Request Complete.”

Official-style demo: append a short status string for every finished request.

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

How It Works

  1. Global. One handler covers every qualifying Ajax call.
  2. Append. Each completion adds another status fragment.
  3. Count. Parallel requests each fire their own complete event.
  4. Migrate. Swap the bind to .on("ajaxComplete") when refactoring.

Example 4 — Migrate to .on("ajaxComplete")

Both bind the same global event — .on() is the recommended API for new code.

jQuery
// 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(){ ... }).");
});
Try It Yourself

How It Works

  1. Same event. Both register handlers for ajaxComplete on document.
  2. Sugar. .ajaxComplete(fn) already calls .on("ajaxComplete", fn).
  3. Rename. Migration is a straight API change for simple bindings.
  4. Cleanup. Pair modern binds with .off("ajaxComplete", fn).

Example 5 — Remove Handler with .off()

Store a named function, then remove it with .off() — not deprecated .unbind().

jQuery
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 + ".");
});
Try It Yourself

How It Works

  1. Named fn. Anonymous handlers cannot be removed individually.
  2. Bind. .ajaxComplete(onComplete) stores that reference.
  3. Remove. .off("ajaxComplete", onComplete) detaches exactly that handler.
  4. Avoid. Do not use deprecated .unbind("ajaxComplete") in new code.

Edge Cases & Pitfalls

Watch for these when reading or migrating legacy Ajax code.

deprecated

Do not use in new code

.ajaxComplete(handler) is deprecated since 3.5. Prefer .on("ajaxComplete").

target

Bind on document only (1.9+)

Handlers on window or other elements will not receive global Ajax events.

trigger

No no-arg trigger form

Unlike .click(), calling .ajaxComplete() with no arguments does not fire the event.

global

global: false stays silent

Those requests never trigger .ajaxComplete() handlers. Per-request callbacks still work.

Compatibility

Browser Support

The .ajaxComplete() method has been part of jQuery since 1.0. Since 1.9, handlers must attach to document. Binding via .ajaxComplete(handler) is deprecated since 3.5 but still functional in jQuery 3.x.

✓ Deprecated · jQuery 1.0+

jQuery .ajaxComplete()

Works wherever your loaded jQuery version runs Ajax. Prefer .on('ajaxComplete') for new projects. fetch() and axios do not trigger jQuery global events.

100% With jQuery Ajax
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.ajaxComplete() Legacy API

Bottom line: Safe in legacy jQuery projects. Migrate bindings to .on('ajaxComplete') and cleanup to .off('ajaxComplete') when updating code.

Analysis

Performance Notes

ApproachCostBest for
One filtered global handlerCheapSite-wide logging / cleanup
Per-request .always()CheapCleanup for a single call
Heavy DOM work every completeExpensiveAvoid — filter or debounce

Legacy and modern binds have the same cost. Keep handlers light, filter by URL before touching the DOM, and prefer .always() for request-specific work.

Remember

Key Takeaways

  • Role: legacy global “request finished” bind — success or error.
  • Migrate: $(document).on("ajaxComplete", fn) — preferred since 3.5.
  • Args: function(event, jqXHR, ajaxOptions) — filter with ajaxOptions.url.
  • Cleanup: use .off("ajaxComplete", fn) — not .unbind().

One line: .ajaxComplete() is deprecated sugar for .on("ajaxComplete") on document.

Frequently Asked Questions

The .ajaxComplete(handler) method binds a global function that runs whenever any qualifying jQuery Ajax request finishes — success or error. Attach it to document: $(document).ajaxComplete(fn). It is bind-only (no trigger form). Deprecated since jQuery 3.5; use $(document).on("ajaxComplete", handler) instead.
Yes. $(document).ajaxComplete(handler) has been deprecated since jQuery 3.5 (available since 1.0). Prefer $(document).on("ajaxComplete", handler) for new code. Legacy bindings still work in jQuery 3.x; migrate when you touch those files. Remove handlers with $(document).off("ajaxComplete", handler).
ajaxComplete is a global Ajax event, not a DOM event on a specific element. Since jQuery 1.9, all global Ajax handlers — including .ajaxComplete(handler) — must bind to document. Correct legacy form: $(document).ajaxComplete(fn). Modern form: $(document).on("ajaxComplete", fn).
The API lists handler as Function(), but the callback receives three arguments — the same as the ajaxComplete event: function(event, jqXHR, ajaxOptions). Use jqXHR.responseText for the body and ajaxOptions.url to identify the request.
Replace $(document).ajaxComplete(fn) with $(document).on("ajaxComplete", fn). Use $(document).off("ajaxComplete", fn) for cleanup instead of .unbind(). Under the hood, .ajaxComplete(handler) already delegates to .on("ajaxComplete") — migration is a straight rename for simple bindings.
Yes. jQuery 3.x keeps .ajaxComplete(handler) for backward compatibility. It still binds correctly on document. Docs mark it deprecated since 3.5 to steer new projects toward .on(). Prefer the modern API covered in the jQuery ajaxComplete event tutorial.

Next: ajaxStop event

Hide loading UI when the last global Ajax request completes.

ajaxStop tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery ajaxComplete Event jQuery ajaxStop Event