jQuery API

.trigger()

Categories: Events > Event Handler Attachment

.trigger( eventType, extraParameters ) Returns: jQuery

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

  • version added: 1.0.trigger( eventType, extraParameters )

    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.

To trigger handlers bound via jQuery without also triggering the native event, use .triggerHandler() instead.

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.

Examples:

Example: Clicks to button #2 also trigger a click for button #1. 

<!DOCTYPE html>
<html>
<head>
  <style>

button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.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>

Demo:

Example: To submit the first form without using the submit() function, try: 

$("form:first").trigger("submit")

Example: To submit the first form without using the submit() function, try: 

var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
// Perform an action...
}

Example: To pass arbitrary data to an event: 

$("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"]);

Example: To pass arbitrary data through an event object: 

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

Example: Alternate way to pass data through an event object: 

$("body").trigger({
type:"logged",
user:"foo",
pass:"bar"

});

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .trigger() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Rich
    I believe this page is missing a bit of vital information: 'Triggered events now bubble up the DOM.' http://docs.jquery.com/Release:jQuery_1.3#Changes
  • vativa
    $('#inputFile').trigger('click') doesn't work in Firefox (Mac OS X). Any ideas? Thanks...
  • Qianxuechao
    How to trigger click event of <input type=file> with firefox?

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

    it does not work with firefox, but ok with IE.
  • Using .trigger('click') will not trigger the native click event. To simulate a default click, you can bind a click handler like so:

    $('#someLink').bind('click', function() {
      window.location.href = this.href;
      return false;
    });


    ... where "someLink" is an actual selector of your choice.

    You can then trigger that bound click handler if you want, based on some other interaction.

    $('input.mycheckbox').click(function() {
      if (this.checked) {
        $('#someLink').trigger('click');
      }
    });
  • BASTA!
    Can a jQuery please state decisively here whether trigger()

    - is supposed to trigger default processing and does in fact trigger it?
    - is supposed to trigger default processing but fails to do so because of a bug?
    - is NOT supposed to trigger default processing and in fact does not trigger it?
    - is NOT supposed to trigger default processing but does because of a bug?
  • One thing that is confusing is that trigger tries to call a default event handler even for custom events. This isn't captured in the documentation. So if you have an object like so:

    var o = { remove: function() { alert('the last resort!'); } };

    and then try to bind and trigger a "remove" event on it:

    $(o).bind( 'remove', function() { alert('the first resort'); } );
    $(o).trigger('remove');

    The browser will show two alert windows, the first with the text: "the first resort", and the second with the text: "the last resort!".

    This isn't really captured anywhere in the documentation for this method and to be honest seems more like a bug to me, so I'm just listing it out here in case anybody else was also left scratching their heads for an hour or two.
  • AnotherStupidPseudo
    I have the exact same problem.
    I'm trying to write a jQuery plugin for HTML 5 Video ( with fallbacks) but the problem is
    the Video Element (the HTML Node) has a method ( a property ?) called "play".
    So when I add a "play" method to the jQuery.fn object and then try to trigger a "play" event on a video element, the event is fired twice !

    For example, I create a new method called "play" :
    jQuery.fn.play = function( fn ) {
    return (fn) ? this.bind( "play", fn ) : this.trigger( "play");
    };
    and then I try to use it :
    $("video").play(function() { alert('failed') });
    The browser shows two alert windows.

    Can anyone help ?
  • Try using the triggerHandler() method instead.
  • AnotherStupidPseudo
    I tried that, but unfortunately it only works too well ,in a way.
    Using triggerHandler() also prevents the default action, which in this case is playing the video. So when the event occurs, only alert is shown but the video isn't played >.<

    But thanks for the suggestion. If you have another idea, I'll be glad to hear it.
  • The description and syntax listing needs to be updated to reflect that you can also pass an event to the function, as illustrated in the examples. Besides confusing developers, the omission also confuses jquerylint...
  • Ricardo
    If you bind a name event like "change.mask" and call trigger( "change.mask" ) it only works once, is that right?
  • dima
    I was trying to use .trigger with a checkbox input, and there seems to be a problem:

    $('#mybox').bind('click', function(e) { alert(e.target.checked); });
    $('#mybox').click();

    If the checkbox is unchecked initially, the alert message will say 'false' first, and then the checkmark will appear. It seems that the handler is called before the state changes.
    Clicking on the same checkbox with a mouse, first changes the state, and then invokes handler.
    This is a big problem, because there is no way for the callback to know which state the input is going to be in if the even can be fired either programmatically or via gui
  • Mike D.
    You can use this mechanism to trigger events from your custom classes as well. To trigger an event from within your class, use $(this).trigger('myCustomEvent', [ param1, param2, etc. ]); To subscribe to such an event, use var myObj = new CustomObject(); $(myObj).bind('myCustomEvent', myEventHandler); The documentation implies that you can only bind/trigger on DOM elements, but I have tried this successfully.
  • Anon
    Binding and triggering events on non-DOM objects do work, but they cannot be unbound either through .unbind() or .one()
  • sterba
    It does not work for hyperlinks:
    $('a').trigger('click');
    why?
  • Rabo
    @sterba - Why not just do $('a').click() ?
  • That's irrelevant. sterba is asking why the default behavior is not triggered.
  • sterba
    Yes Samuel, you`r right. After while I think, that it`s intended to do so: just to trigger onclick, but no the default behavior.
  • $('a').trigger('click') or $('a').click() will not trigger the default behavior on a link, even if nothing else is preventing it
  • hyphan
    Maybe browsers prevent it for security reasons? Had to use window.location.href too..