jQuery Callbacks fire() Method

What You’ll Learn

The fire() method is how you run a jQuery Callbacks list — it calls every registered handler in order and passes along any arguments you supply. This tutorial covers syntax, five examples, comparisons with add() and fireWith(), and edge cases like empty or disabled lists.

Introduction

Callback lists are useless until something triggers them. In jQuery’s Callbacks API, that trigger is fire() (or its sibling fireWith() when you need a custom this value).

Typical flow: create a list with $.Callbacks(), register handlers via add(), then call fire() when your event occurs — data loaded, button clicked, plugin initialized. Every subscriber runs with the same arguments you pass to fire().

Understanding the fire() Method

callbacks.fire([arg1 [, arg2 ...]]) synchronously invokes each function in the list. Handlers run in the order they were added. If a handler returns false and the list was created with the stopOnFalse flag, remaining callbacks are skipped.

fire() does nothing when the list is empty, disabled, or locked in a state that prevents firing. It does not throw — which makes defensive checks with disabled() optional but helpful for logging.

📝 Syntax

General form of callbacks.fire:

callbacks.fire( [ arg1 [, arg2 ... ] ] )

Parameters

• arg1, arg2, … (optional) — values forwarded to every callback as positional arguments.

Return value

• Returns the same Callbacks object for chaining.

Classic example

const callbacks = $.Callbacks();



callbacks.add(function (message) {

  console.log("Callback 1:", message);

});



callbacks.add(function (message) {

  console.log("Callback 2:", message.toUpperCase());

});



callbacks.fire("Hello, world!");

Examples Gallery

Each example shows a different aspect of triggering Callbacks lists.

const callbacks = $.Callbacks();



callbacks.add(function (message) {

  console.log("Callback 1:", message);

});



callbacks.add(function (message) {

  console.log("Callback 2:", message.toUpperCase());

});



callbacks.fire("Hello, world!");

Callback 1: Hello, world!

Callback 2: HELLO, WORLD!

const callbacks = $.Callbacks();



callbacks.add(function () { console.log("Step 1"); });

callbacks.add(function () { console.log("Step 2"); });

callbacks.add(function () { console.log("Step 3"); });



callbacks.fire();

Step 1

Step 2

Step 3

const callbacks = $.Callbacks();



console.log("Handlers before fire:", callbacks ? "list exists" : "missing");

callbacks.fire("data");

console.log("Fire completed — no handlers ran");

Handlers before fire: list exists

Fire completed — no handlers ran

const callbacks = $.Callbacks();



callbacks.add(function (n) {

  console.log("Count:", n);

});



callbacks.fire(1);

callbacks.fire(2);

Count: 1

Count: 2

const EventBus = (function () {

  const onData = $.Callbacks();



  return {

    subscribe: function (fn) { onData.add(fn); },

    emit: function (payload) {

      if (!onData.disabled()) {

        onData.fire(payload);

      }

    }

  };

})();



EventBus.subscribe(function (data) {

  console.log("Received:", data.id, data.value);

});



EventBus.emit({ id: 42, value: "temperature" });

Received: 42 temperature

🚀 Use Cases

• Custom events — trigger subscriber callbacks on user actions or data changes.
• Plugin lifecycle — fire onInit, onDestroy, or onUpdate hook lists.
• Async completion — fire when a timer, animation, or mock AJAX step finishes.
• Pipeline stages — pass shared context objects through ordered handlers.
• Testing — fire lists in unit tests to verify subscribers react correctly.

📝 Notes

• fire() runs synchronously — long handlers block until they finish.
• Handlers added during a fire (from inside another handler) may run in the same invocation — behavior depends on list state; avoid unless intentional.
• After disable(), fire() is always a no-op.
• Use fireWith(element, [args]) when handlers need this to be a DOM node.
• fired() tells you whether the list has fired at least once — useful with once lists.

💡 Best Practices