jQuery ajaxSuccess Event

What Is ajaxSuccess?

ajaxSuccess is a global AjaxEvent (since jQuery 1.0; .on() binding since 1.7). jQuery triggers it on document whenever any qualifying Ajax request completes successfully. All registered handlers run.

$(document).on("ajaxSuccess", function (event, jqXHR, ajaxOptions, data) {
  // runs after every successful qualifying Ajax request
});

// Order (on success):
// ajaxSuccess  →  ajaxComplete  →  (ajaxStop when idle)

// Opt out for one call:
$.ajax({ url: "/x", global: false });

How to Use ajaxSuccess

Bind once on document, then any successful jQuery Ajax call can notify that handler.

1. Attach the handler to document with .on("ajaxSuccess", handler).
2. Make requests with $.ajax(), $.get(), $.post(), or .load().
3. Optionally filter with ajaxOptions.url (or other settings).
4. Read the body via jqXHR.responseText or the parsed data argument.
5. Use global: false on requests that must stay silent.

Pseudocode

bind ajaxSuccess on document with handler(event, jqXHR, ajaxOptions, data)

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

    if request succeeded:
        fire ajaxSuccess
            for each registered handler:
                call handler(event, jqXHR, ajaxOptions, data)
    else:
        fire ajaxError instead

    fire ajaxComplete
    if no other global Ajax requests are active:
        fire ajaxStop

Cheat Sheet

Keep these facts handy while wiring global success handlers.

Live Preview

Run a real $.get() and watch the global ajaxSuccess handler update the log.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

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

$(".trigger").on("click", function () {
  $(".result").load("ajax/test.html");
});

Click .trigger → .load() runs
When request succeeds → .log shows
"Triggered ajaxSuccess handler."

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

Matching URL → log shows message + responseText
Other URLs → handler runs, if-block skipped

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

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

Three parallel successes → three appends

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

// Fires ajaxSuccess
$.get("/api/public");

// Does NOT fire ajaxSuccess
$.ajax({ url: "/api/silent", global: false });

Public $.get → ajaxSuccess runs
Private $.ajax({ global: false }) → silent
(per-request .done() still works)

var globalCount = 0;
var doneCount = 0;

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

$.ajax("/a").done(function () { doneCount++; });
$.ajax("/b").done(function () { doneCount++; });

// After both succeed:
// globalCount === 2, doneCount === 2
// but each .done() only saw its own request

Two $.ajax() calls succeed
global ajaxSuccess count → 2
per-request .done() count → 2

Performance Notes

Global handlers are fine when they stay light. Filter by URL before touching the DOM, and prefer .done() for request-specific work.

Key Takeaways