jQuery .trigger() Method

What You’ll Learn

The .trigger() method programmatically executes handlers bound with .on(). Use it to simulate clicks, fire custom events, pass runtime data to handlers, and chain UI actions — all without waiting for user input. This tutorial covers official signatures, five worked examples, and comparison with .triggerHandler().

Introduction

Events usually start with user action — a click, a keypress, a form submit. But your code often needs to fire those same handlers programmatically: auto-submit after validation, simulate a button click from another control, or notify components through a custom event name.

jQuery’s .trigger() method (available since 1.0) runs every handler registered for the given event type on the matched elements, in the same order they would run if the event occurred naturally. Since jQuery 1.3, triggered events bubble up the DOM tree just like real browser events.

Understanding .trigger()

Binding and triggering are two halves of the same pattern. You attach a handler with .on("click", fn); later, .trigger("click") invokes fn without the user clicking. jQuery builds a synthesized event object and passes it as the first argument to each handler.

The second argument to .trigger() lets you pass extra parameters determined at trigger time. This differs from eventData passed to .on() at bind time — both reach the handler, but through different mechanisms and at different stages.

📝 Syntax

Two signatures from the official jQuery API:

1. Event type string — .trigger( eventType [, extraParameters ] ) since 1.0

.trigger( eventType [, extraParameters ] )

• eventType — event name such as "click", "submit", or a custom name like "logged".
• extraParameters — array (or single value since 1.6.2) passed to handlers after the event object.

2. Event object — .trigger( event [, extraParameters ] ) since 1.3

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Handler called preventDefault()
}

Bind + trigger pattern

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );  // runs the handler immediately

Custom event with parameters

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo" ).trigger( "custom", [ "Custom", "Event" ] );

Return value

• Returns the original jQuery object for chaining.
• Handler return values are collected; if any handler returns false, the returned jQuery object reflects that.

Examples Gallery

All five examples follow the official jQuery API documentation for .trigger(). Use the Try-it links to fire events and watch handlers run programmatically.

$( "button" ).first().on( "click", function() {
  update( $( "span" ).first() );
});

$( "button" ).last().on( "click", function() {
  $( "button" ).first().trigger( "click" );
  update( $( "span" ).last() );
});

function update( j ) {
  var n = parseInt( j.text(), 10 );
  j.text( n + 1 );
}

Click Button #1 → span #1 counter increments

Click Button #2 → triggers Button #1 handler + span #2 increments

Both counters can increase from one Button #2 click

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

$( "#foo" ).trigger( "click" );

Page load → trigger("click") fires immediately

Alert shows #foo text without user click

Manual clicks also run the same handler

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});

$( "#foo" ).trigger( "custom", [ "Custom", "Event" ] );

trigger("custom", ["Custom", "Event"])

Alert shows:
Custom
Event

param1 and param2 follow the event object in the handler

$( "p" )
  .on( "click", function( event, a, b ) {
    // Normal click: a and b are undefined
    // trigger below: a is "foo", b is "bar"
    alert( "a=" + a + ", b=" + b );
  } )
  .trigger( "click", [ "foo", "bar" ] );

trigger("click", ["foo", "bar"]) → alert "a=foo, b=bar"

User click on p → alert "a=undefined, b=undefined"

Same handler, different data sources

var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";

$( "body" ).on( "logged", function( e ) {
  alert( "User: " + e.user + ", Pass: " + e.pass );
  e.preventDefault();
});

$( "body" ).trigger( event );

if ( event.isDefaultPrevented() ) {
  console.log( "Default was prevented" );
}

jQuery.Event("logged") with .user and .pass

Handler reads custom properties from event object

preventDefault() → isDefaultPrevented() is true after trigger

🚀 Common Use Cases

• Chained UI actions — one button triggers another element’s click handler.
• Form workflows — validate in code, then $("form").trigger("submit").
• Component pub/sub — $("#app").trigger("dataLoaded", [payload]) between modules.
• Testing & demos — fire events in Try-it labs without manual clicks.
• Auto-initialization — trigger a custom "ready" event after plugin setup.
• Keyboard shortcuts — map a keypress to $("#save").trigger("click").

📝 Notes

• .trigger() has existed since jQuery 1.0; event object support since 1.3; single-value extraParameters since 1.6.2.
• Triggered events bubble (since 1.3) but do not perfectly replicate every detail of user-generated events.
• extraParameters to .trigger() differ from eventData to .on() — bind-time vs trigger-time data.
• On plain objects and DOM nodes, if the event name matches a property (e.g. onclick), jQuery may invoke it unless preventDefault() is called.
• For objects with a length property that are not array-like, wrap in an array: .trigger("evt", [{ length: 1 }]).
• .trigger() works on plain JavaScript objects wrapped in jQuery for pub/sub-style messaging.

💡 Best Practices