Question

In jQuery, I do stuff like this a lot:

$('#myId').bind('myevent', function() { ... }).trigger('myevent');

Works great when the selector only finds one element, but I don’t want it to fire more than once if there’s more than one match.

Is there some way to basically declare an anonymous function and execute it exactly once all in one swoop?

Or do you have to make it non-anonymous (give it a name), pass it in, and call it once manually?

---

For example, I might bind a .change event to set of radio buttons. In the callback, I check which one is actually set and then show/hide a div. When the page loads, the div needs to be in the correct state, so I fire the event once and let the JS figure out whether or not it should be shown. But I don’t really want it to fire 3 times because I’ve got 3 radio buttons.

Answer 1

Use the triggerHandler()^[docs] method instead of the trigger()^[docs] method.

This will invoke the handler only once, and will not allow the event to bubble or trigger the default behavior.

From the docs:

The .triggerHandler() method behaves
similarly to .trigger(), with the
following exceptions:

• The .triggerHandler() method does not cause the default behavior of an
  event to occur (such as a form
  submission).
• While .trigger() will operate on all elements matched by the jQuery
  object, .triggerHandler() only affects
  the first matched element.
• Events created with .triggerHandler() do not bubble up the
  DOM hierarchy; if they are not handled
  by the target element directly, they
  do nothing.
• Instead of returning the jQuery object (to allow chaining),
  .triggerHandler() returns whatever
  value was returned by the last handler
  it caused to be executed. If no
  handlers are triggered, it returns
  undefined