jQuery .trigger() Method

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .trigger()?

.trigger(eventType [, extraParameters]) executes handlers (and related behaviors) for an event on the matched elements (since 1.0). Since 1.3 you can also pass a jQuery.Event object; triggered events bubble.

Remember
$("#foo").on("click", function () {
  alert($(this).text());
});

$("#foo").trigger("click"); // run that handler now

// Custom event + extra args
$("#foo").on("custom", function (event, a, b) {
  alert(a + " / " + b);
});
$("#foo").trigger("custom", ["Custom", "Event"]);
NeedUse
Fire handlers (may bubble / native).trigger()
Fire handlers only (no bubble / default).triggerHandler()
Attach handlers.on()
One-shot handlers.one()
Remove handlers.off()
Approach

How to Use .trigger()

Bind first with .on(), then fire the same event type when you need to.

  1. Attach handlers with .on() (or a shortcut like .click()).
  2. Call .trigger("click") (or another type) on the element.
  3. Optional: pass extra data as an array/object for the handler.
  4. Optional: build a jQuery.Event and inspect isDefaultPrevented() afterward.
  5. Use .triggerHandler() if you must avoid bubbling and native defaults.
FormSinceRole
.trigger(eventType [, extra])1.0Fire by event name string
.trigger(event [, extra])1.3Fire a jQuery.Event object

Pseudocode

Pseudocode
for each matched element:
    create / use event object for EVENT_TYPE
    run jQuery handlers in bind order
        handler(event, EXTRA…)
    allow bubbling (since 1.3) unless stopped
    may invoke related native behavior

vs triggerHandler:
    first element only
    no bubble
    no native default
Reference

Cheat Sheet

Keep these differences straight while wiring events.

TopicDetail
ReturnsjQuery (chainable)
Since1.0 · Event object 1.3 · bubbles 1.3
Extra argsAfter event in the handler
vs event.dataBind-time data from .on(); trigger extras are fire-time
Custom eventsAny name you bind with .on()
vs .triggerHandler()Handler-only, first element, no bubble/default
Try it

Live Preview

Trigger a click, a custom event, or pass extra parameters — no mouse required.

Handlers are already bound — pick an action and click Run.

Log
Ready — pick an action and click Run.
Code

jQuery Examples

Short, copy-ready snippets. Bind with .on(), then fire with .trigger().

Example 1 — Trigger Another Click

Button #2 programmatically fires Button #1’s click handlers.

jQuery
$("#btn1").on("click", function () {
  $("#out").text("Button #1 handler ran");
});

$("#btn2").on("click", function () {
  $("#btn1").trigger("click");
  $("#out").append(" · Button #2 also ran");
});
Try It Yourself

How It Works

  1. Bind. #1 has its own click handler.
  2. Trigger. #2 calls $("#btn1").trigger("click").
  3. Reuse. #1’s handlers run without a physical click on #1.
  4. Continue. #2’s own handler can still do more work after.

Example 2 — Extra Parameters

Pass fire-time data after the event object.

jQuery
$("p").on("click", function (event, a, b) {
  $("#out").text(String(a) + " / " + String(b));
});

$("p").trigger("click", ["foo", "bar"]);
Try It Yourself

How It Works

  1. Handler. Declares parameters after event.
  2. Trigger. Second argument supplies those values.
  3. Normal click. A real user click leaves a / b undefined.
  4. vs eventData. .on(…, data, fn) is bind-time; trigger extras are fire-time.

Example 3 — Custom Event

Invent an event name and fire it with payload data.

jQuery
$("#target").on("myCustomEvent", function (event, myName) {
  $(this).text(myName + ", hi there!");
});

$("#fire").on("click", function () {
  $("#target").trigger("myCustomEvent", ["John"]);
});
Try It Yourself

How It Works

  1. Bind. Listen for myCustomEvent with .on().
  2. Fire. Button calls .trigger("myCustomEvent", …).
  3. Args. Extra values arrive after event.
  4. Use. Components can talk without a native DOM event type.

Example 4 — jQuery.Event Object

Build an event, trigger it, then check if default was prevented.

jQuery
$("#form").on("submit", function (event) {
  event.preventDefault();
  $("#out").text("submit handled");
});

var event = jQuery.Event("submit");
$("#form").trigger(event);

if (event.isDefaultPrevented()) {
  $("#out").append(" · default prevented");
}
Try It Yourself

How It Works

  1. Create. jQuery.Event("submit") builds a reusable event object.
  2. Trigger. Handlers receive that same object.
  3. Prevent. Handler calls preventDefault().
  4. Inspect. Afterward, isDefaultPrevented() tells you what happened.

Example 5 — .trigger() vs .triggerHandler()

Same click name — different bubbling / native behavior.

jQuery
$("#child").on("click", function () {
  $("#out").append("child ");
});
$("#parent").on("click", function () {
  $("#out").append("parent ");
});

// Bubbles to parent
$("#child").trigger("click");

// Does not bubble
$("#out").append("| ");
$("#child").triggerHandler("click");
Try It Yourself

How It Works

  1. Trigger. Child handler runs, then the event can reach parent.
  2. TriggerHandler. Only the child’s handlers run — no bubble.
  3. Defaults. .triggerHandler() also skips native default actions.
  4. Pick. Use handler-only when native side effects are unwanted.

Edge Cases & Pitfalls

Watch for these when firing events in code.

native

Not a perfect user-event clone

Handlers run, but browser quirks of a real interaction may differ — especially for focus/submit.

methods

Matching property methods may run

If an event name matches an object property (and default is not prevented), jQuery may try to call it as a method — use .triggerHandler() to avoid that.

data

Trigger extras ≠ .on() eventData

Bind-time event.data is fixed when you attach; trigger extras are chosen when you fire.

one

.trigger() spends a .one() shot

Programmatic fire counts as the first invocation for one-shot handlers.

Compatibility

Browser Support

.trigger() has been part of jQuery since 1.0 (Event-object form and bubbling since 1.3). It works wherever your loaded jQuery version runs.

✓ Stable · jQuery 1.0+

.trigger()

Works in every browser that runs your loaded jQuery version. Prefer a current jQuery 3.x build for modern projects.

100% With jQuery events
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.trigger() Universal

Bottom line: Production-ready. Pair with .on() for custom events; use .triggerHandler() when native defaults must not run.

Analysis

Performance Notes

ApproachCostBest for
Occasional .trigger()LowTests, UI wiring, custom events
Trigger inside tight loopsHigherCall shared functions directly instead
Deep bubbling treesHigherStop propagation when done; prefer closer roots

Triggering is fine for intentional signals. If you only need shared logic, a plain function call is cheaper than synthesizing an event.

Remember

Key Takeaways

  • Role: programmatically run event handlers on matched elements.
  • Extras: pass fire-time args after event in the handler.
  • Custom: bind any name with .on(), fire it with .trigger().
  • Safer native: use .triggerHandler() to skip bubble and defaults.

One line: .trigger() fires bound handlers on demand — native or custom — with optional extra arguments.

Frequently Asked Questions

.trigger() runs handlers attached for an event type on the matched elements. It synthesizes an event (and can bubble since 1.3) so you can fire clicks, submits, or custom events without a real user action.
.trigger() affects all matched elements, bubbles, and may invoke native behaviors. .triggerHandler() runs handlers on only the first matched element, does not bubble, and skips native default actions.
Pass extra parameters as the second argument: .trigger("custom", ["a", "b"]). They arrive after the event object in the handler. That is different from eventData given to .on() at bind time.
Yes. Bind with .on("myEvent", fn) and fire with .trigger("myEvent") or .trigger("myEvent", [extra]). Useful for component messaging without native DOM event types.
No. It runs jQuery handlers in order with a synthesized event object, but it does not perfectly replicate every browser detail of a natural user event.
When you want jQuery handlers only — no bubbling and no native default (for example, avoiding a real form submit or focus side effects).

Next: .triggerHandler()

See the no-bubble, no-default alternative to .trigger().

.triggerHandler() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery .one() Method jQuery .triggerHandler() Method