jQuery Callbacks add() Method

What You’ll Learn

The add() method registers functions on a jQuery Callbacks list so they can run together later via fire(). This tutorial covers syntax, five worked examples, how add() differs from immediate invocation, and practical patterns for plugins and event hooks.

Introduction

Callbacks are functions you want to run when something happens — a button click, an AJAX response, or a plugin lifecycle event. jQuery’s Callbacks object is a managed list for those functions. The add() method is how you put handlers into that list.

Unlike calling a function directly, add() defers execution until you explicitly trigger the list with fire() or fireWith(). That separation keeps registration and invocation clean — especially when multiple parts of your app subscribe to the same event.

Understanding the add() Method

callbacks.add(callback) appends one or more functions to an internal queue. Each function you add stays in the list until you remove it with remove(), clear the list with empty(), or replace the whole Callbacks object.

When fire() runs, jQuery walks the list in registration order and calls every function currently stored. With the default Callbacks list (no special flags), each fire() executes all registered handlers again — not only newly added ones.

📝 Syntax

General form of callbacks.add:

callbacks.add( callback [, callback ] )

Parameters

• callback — a function to append to the list. Pass multiple functions as separate arguments; each is added in order.

Return value

• Returns the same Callbacks object, so you can chain .add() calls or follow with .fire().

Minimal workflow

const callbacks = $.Callbacks();



callbacks.add(function () {

  console.log("Handler runs on fire()");

});



callbacks.fire(); // invokes the handler

Examples Gallery

Each example uses $.Callbacks(). Open DevTools or use the Try-it links to run them interactively.

const callbacks = $.Callbacks();



callbacks.add(function () {

  console.log("First callback executed");

});



callbacks.fire();

First callback executed

const callbacks = $.Callbacks();



callbacks.add(

  function () { console.log("Step 1: validate"); },

  function () { console.log("Step 2: save"); },

  function () { console.log("Step 3: notify"); }

);



callbacks.fire();

Step 1: validate

Step 2: save

Step 3: notify

const callbacks = $.Callbacks();



callbacks.add(function () {

  console.log("First callback");

});



callbacks.fire();

// → First callback



callbacks.add(function () {

  console.log("Second callback");

});



callbacks.fire();

// → First callback  (still in the list)

// → Second callback

First callback

First callback

Second callback

const callbacks = $.Callbacks();



callbacks.add(function (name, score) {

  console.log(name + " scored " + score);

});



callbacks.add(function (name, score) {

  console.log("Log entry:", name, score);

});



callbacks.fire("Ada", 98);

Ada scored 98

Log entry: Ada 98

const Gallery = (function () {

  const onRender = $.Callbacks();



  function render(items) {

    console.log("Core render:", items.join(", "));

    onRender.fire(items);

  }



  return {

    onRender: onRender,

    render: render

  };

})();



// Consumer adds a hook

Gallery.onRender.add(function (items) {

  console.log("Analytics: rendered", items.length, "items");

});



Gallery.render(["photo1.jpg", "photo2.jpg"]);

Core render: photo1.jpg, photo2.jpg

Analytics: rendered 2 items

🚀 Use Cases

• Event handling — collect handlers for custom events, then fire when the event occurs.
• Plugin development — let third-party code extend your widget via add() on exposed Callbacks lists.
• Pub/Sub patterns — decouple publishers (fire) from subscribers (add) inside a module.
• Deferred internals — jQuery’s Deferred uses Callbacks lists for done, fail, and progress queues.
• Animation coordination — queue callbacks to run when a sequence step completes.

📝 Notes

• add() never runs callbacks by itself — always pair with fire() or fireWith().
• Default lists re-run every handler on each fire(); use flags on $.Callbacks() for once/memory behavior.
• Duplicate function references run twice if added twice.
• While the list is locked, new add() calls are ignored until you understand lock semantics (see lock() tutorial).
• For most app code today, native events or Promises may suffice — Callbacks shines in jQuery plugins and library internals.

💡 Best Practices