The trigger() function is used to trigger events of the specified type on each matching element.

In addition, you can pass in additional parameters for the event handler when the event is triggered.

This function can be used to manually trigger event handlers that execute bindings on an element, as well as to trigger the default behavior of executing that element.

In the case of form element <form>, trigger("submit") can trigger submit events for the form binding and also perform the form submit operation, which is the default behavior for form submit events.

The trigger("click") with the link label <a> is a special case based on the feedback from Netizen@Flying. It does not trigger the default behavior of the link click event - jump to the action of the corresponding link, check here Related details.

Starting with jQuery 1.3, events triggered by the trigger() function also support event bubbling, which can be passed to the DOM tree.

This function belongs to a jQuery object (instance).

grammar

The trigger() function has two main forms of use:

Usage 1:

jQueryObject.trigger( events [, extraArguments ] )

Events of the specified type (events) are triggered on each matching element, and additional parameters (extraArguments) can be passed into the event handler.

Usage 2: jQuery 1.3 Added support for this usage.

jQueryObject.trigger( eventObject [, extraArguments ] )

The Event Object passed in for the specified event handler, which triggers the execution of the corresponding event handler, and can pass in additional parameters (extraArguments) for the event handler.

parameter

The trigger() function passes in a default parameter for the event handler that triggers execution, which is what represents the current event Event object.

The parameter extraArguments is used to pass in additional parameters for the event handler function.If extraArguments is an array, each element acts as a parameter to the function.

Return value

The trigger() function returns a jQuery type, returning the current jQuery object itself.

Ex amp le & Description

Refer to the following initial HTML code:

<input id="btn1" type="button" value="Click 1" />
<input id="btn2" type="button" value="Click 2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

First, we bind events to the button and <a> elements above, then use the trigger() function to trigger events directly, with the following code:

var $log = $("#log");

function handler( event, arg1, arg2 ){
    var html = '<br>Trigger Element#' + this.id + 'Of[' + event.type +']Events, additional function parameters are:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// Bind event handlers to click events for all button elements
$buttons.bind( "click", handler );

// Bind event handlers for click, mouseover, mouseleave events for all a elements
$("a").bind( "click mouseover mouseleave", handler );


// Trigger click events for all button s
$buttons.trigger("click"); 
/*(Append Text)
Trigger the [click] event for element #btn1 with additional function parameters: undefined, undefined
 Trigger [click] event for element #btn2, additional function parameters are undefined, undefined
*/


$("#btn1").trigger("click", "CodePlayer");
/*(Append Text)
Trigger the [click] event for element #btn1 with additional function parameters: CodePlayer, undefined
*/

// arg1 = Zhang San, arg2 = 20
$("a").trigger("mouseover", ["Zhang San", 20 ] );
/*(Append Text)
Triggers the [mouseover] event for element #a1, with additional function parameters: Zhang San, 20
*/


$("a").trigger("mouseleave", { name: "Zhang San", age: 18 } );
/*(Append Text)
Triggers the [mouseleave] event for element #a1, with additional function parameters: [object Object], undefined
*/

Run Code (Copy the following code yourself to the demo page to run)

The trigger() function can also trigger events based on the Event object passed in to the event handler.

var $btn1 = $("#btn1");

// Bind event handler for click event of btn1 element
$btn1.bind( "click", function(event){
    alert("click1");    
});

// Bind event handler for click event of btn1 element
// If a valid extra parameter is passed in, click is triggered again
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});

// $btn1.trigger ("click"); //Call click1 once, call click2 once

$btn1.trigger( "click", true ); // Call click1 twice, click2 twice

In addition, the trigger() function can only trigger events that contain the specified namespace (1.4.3+ supports namespaces).

function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}

var $btn1 = $("#btn1");

// Bind event handler for click event of btn1 element
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );


// Trigger click event for btn1, namespace unqualified
$btn1.trigger("click"); // Trigger A, B, C

// Trigger click event containing namespace foo for btn1
$btn1.trigger("click.foo"); // Trigger A, B

// Trigger btn1 click event with namespace test
$btn1.trigger("click.test"); // Trigger B, C

// Trigger a click event that contains both the namespace foo and test for btn1
$btn1.trigger("click.foo.test"); // Trigger B