Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
eventTypeA string containing a JavaScript event type, such as click
or submit
.
extraParametersAn array of additional parameters to pass along to the event handler.
Any event handlers attached with .bind()
or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger()
method. A call to .trigger()
executes the handlers in the same order they would be if the event were triggered naturally by the user:
$('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click');
While .trigger()
simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.
When we define a custom event type using the .bind()
method, the second argument to .trigger()
can become useful. For example, suppose we have bound a handler for the custom
event to our element instead of the built-in click
event as we did above:
$('#foo').bind('custom', function(event, param1, param2) { alert(param1 + "\n" + param2); }); $('#foo').trigger('custom', ['Custom', 'Event']);
The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a .trigger()
call as they are here, these parameters will be passed along to the handler as well.
Note the difference between the extra parameters we're passing here and the eventData
parameter to the .bind() method. Both are mechanisms for passing information to an event handler, but the extraParameters
argument to .trigger()
allows information to be determined at the time the event is triggered, while the eventData
argument to .bind()
requires the information to be already computed at the time the handler is bound.
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
<script>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
</script>
</body>
</html>
$("form:first").trigger("submit")
var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
// Perform an action...
}
$("p").click( function (event, a, b) {
// when a normal click fires, a and b are undefined
// for a trigger like below a refers to "foo" and b refers to "bar"
} ).trigger("click", ["foo", "bar"]);
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
$("body").trigger({
type:"logged",
user:"foo",
pass:"bar"
});