jQuery Callbacks fireWith() Method

What You’ll Learn

The fireWith() method runs every handler on a Callbacks list while letting you choose the this value and pass an argument array. This tutorial covers syntax, five examples, how it compares with fire(), and real patterns for plugins and DOM-driven code.

Introduction

You already know that fire() runs all handlers in a Callbacks list. But what if those handlers expect this to be a plugin instance, a configuration object, or a DOM element — not the default global object?

fireWith() solves that. It is the context-aware twin of fire(): same invocation behavior, plus explicit control over this and a clean array-based argument list.

Understanding the fireWith() Method

callbacks.fireWith(context, args) calls each registered handler in order. Inside every handler, this equals context. Values in the optional args array are passed as function parameters — the same way fire(arg1, arg2) forwards variadic arguments.

Like fire(), fireWith() returns the Callbacks object (chainable), respects list flags such as once and stopOnFalse, and sets fired() to true after the first successful invocation.

📝 Syntax

General form of callbacks.fireWith:

callbacks.fireWith( context [, args ] )

Parameters

• context — The object used as this inside each handler. Can be any JavaScript value (object, DOM node, plugin instance).
• args (optional) — An array or array-like object whose elements become handler parameters. Omit or pass undefined to call handlers with no arguments.

Return value

• The same Callbacks object (supports chaining).

Basic pattern

const callbacks = $.Callbacks();

const app = { name: "Dashboard" };



callbacks.add(function (message) {

  console.log(this.name + " says:", message);

});



callbacks.fireWith(app, ["Hello, world!"]);

// → Dashboard says: Hello, world!

Examples Gallery

Each example shows a different reason to reach for fireWith() over plain fire().

const callbacks = $.Callbacks();

const app = { label: "First callback" };



callbacks.add(function (message) {

  console.log(this.label + ":", message);

});

callbacks.add(function (message) {

  console.log("Second callback:", message.toUpperCase());

});



callbacks.fireWith(app, ["Hello, world!"]);

First callback: Hello, world!

Second callback: HELLO, WORLD!

const callbacks = $.Callbacks();

const owner = { role: "owner" };



callbacks.add(function () {

  console.log("this.role =", this.role || "(undefined)");

});



callbacks.fire();                    // default this

callbacks.fireWith(owner, []);       // owner as this

this.role = (undefined)

this.role = owner

const onClick = $.Callbacks();



onClick.add(function (eventType) {

  console.log(

    "Handler on <" + this.tagName + ">:",

    eventType

  );

});



// In a real page, this would be document.querySelector("button")

const fakeButton = { tagName: "BUTTON", id: "save" };

onClick.fireWith(fakeButton, ["click"]);

Handler on <BUTTON>: click

const callbacks = $.Callbacks();

const sensor = { id: "temp-1" };



callbacks.add(function (value, unit, timestamp) {

  console.log(

    this.id + " →",

    value + unit,

    "at",

    timestamp

  );

});



callbacks.fireWith(sensor, [22.5, "°C", "2026-07-17"]);

temp-1 → 22.5°C at 2026-07-17

function Slider(options) {

  this.options = options;

  this.onChange = $.Callbacks();

}



Slider.prototype.setValue = function (value) {

  this.value = value;

  this.onChange.fireWith(this, [value]);

};



const slider = new Slider({ min: 0, max: 100 });

slider.onChange.add(function (v) {

  console.log("Slider", this.options.max, "now:", v);

});



slider.setValue(42);

Slider 100 now: 42

🚀 Use Cases

• jQuery plugins — notify subscribers with the plugin instance as this.
• Custom events — fire handlers with the target element or event source as context.
• Deferred internals — jQuery uses Callbacks (and fireWith) inside its Deferred/promise pipeline.
• Test doubles — assert handlers received the expected this and argument array.
• Object-oriented modules — keep handler code reading like instance methods via fireWith(this, args).

📝 Notes

• The second argument must be an array (or array-like), not bare comma-separated values.
• fireWith() and fire() both set fired() to true.
• On a once list, only the first fireWith() runs handlers; later calls are ignored.
• After disable(), fireWith() does nothing — check with disabled() if needed.
• Returning false from a handler may stop the list when stopOnFalse is enabled.

💡 Best Practices