Question

I am using the jQuery trigger method to call an event… but it behaves inconsistently. Sometimes it call the event, sometimes it does not.

<a href="#" onclick="
    $(this).trigger('custom-event');
    window.location.href = 'url';
    return false;
">text</a>

The custom-event has lots of listeners added to it.
It is as if the trigger method is not synchronous, allowing the window.location.href be changed before executing the events. And when window.location.href is changed a navigation occurs, interrupting everything.

How can I trigger events synchronously?

Using jQuery 1.8.1.

EDIT

I have found that the event, when called has a stack trace like this:

1. jQuery.fx.tick (jquery-1.8.1.js:9021)
2. tick (jquery-1.8.1.js:8499)
3. jQuery.Callbacks.self.fireWith (jquery-1.8.1.js:1082)
4. jQuery.Callbacks.fire (jquery-1.8.1.js:974)
5. jQuery.speed.opt.complete (jquery-1.8.1.js:8991)
6. $.customEvent (myfile.js:28)

This proves that jQuery trigger method is asynchronous. (I was wrong… this only proves that the event I was calling, had an animation inside it, and was calling the expected function inside the callback after the animation)

Answer 1

You, my friend, are looking for jQuery “when”.

http://api.jquery.com/jQuery.when/

To force anything to be synchronous, you can use something like this….

$.when($(this).trigger('custom-event')).done(function(){
    window.location.href = 'url';
});