jQuery callbacks.fireWith() Method — Context and Args

What Is fireWith()?

callbacks.fireWith(context, args) runs every handler on a Callbacks list (since jQuery 1.7) with this set to context and with values from the args array. Returns the same Callbacks object for chaining.

callbacks.fireWith(window, ["foo", "bar"])
// each handler runs as: fn.call(window, "foo", "bar")

fire("a", "b")              // args only
fireWith(ctx, ["a", "b"])   // this + args array

How to Use fireWith()

Pick a context object, pack arguments into an array, then fire.

1. Create a list and add() handlers that expect a useful this.
2. Choose the context (element, plugin instance, plain object, …).
3. Call fireWith(context, [arg1, arg2, …]).
4. Omit args when handlers need this but no parameters.

Pseudocode

function fireWith(callbacks, context, args):
    if callbacks is disabled: return callbacks
    if once and already fired: return callbacks

    argList = args or []
    for each handler in callbacks.list:
        handler.call(context, ...argList)

    mark list as fired
    return callbacks

Cheat Sheet

Keep these facts handy when choosing fireWith over fire.

Live Preview

Fire with different contexts and watch this plus arguments in 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.

var log = function (value1, value2) {
  console.log("Received: " + value1 + "," + value2);
};

var callbacks = $.Callbacks();
callbacks.add(log);
callbacks.fireWith(window, ["foo", "bar"]);
// Received: foo,bar

Received: foo,bar

var cbs = $.Callbacks();
cbs.add(function (label) {
  console.log(this.id + ": " + label);
});

cbs.fireWith({ id: "box" }, ["ready"]);
// box: ready

box: ready

var lines = [];
var fn = function (a, b) {
  lines.push((this && this.tag) + ":" + a + "," + b);
};

var cbs = $.Callbacks();
cbs.add(fn);

cbs.fire("x", "y");
cbs.fireWith({ tag: "ctx" }, ["x", "y"]);

console.log(lines.join("\n"));
// undefined:x,y   (or window-related in sloppy mode)
// ctx:x,y

undefined:x,y
ctx:x,y

var cbs = $.Callbacks();
cbs.add(function () {
  console.log("id=" + this.id);
});

cbs.fireWith({ id: "solo" });
// id=solo

console.log(cbs.fired());  // true

id=solo
true

Performance Notes

Cost matches fire() — one call per handler. Prefer lean subscribers; defer expensive work outside the Callbacks pass.

Key Takeaways