global custom events in jQuery

Question

I want to use custom jQuery events independent of DOM elements, but I'm not sure what the best way is to achieve this.

Here's what I started out with:

// some system component registers an event handler
$().bind("foo.bar", handler); // foo is my app's namespace, bar is event name
// another part of the system fires off the event
$().trigger("foo.bar", { context: "lorem ipsum" });

After looking at jQuery's source, in particular its handling of global AJAX events, I figured this should work:

$.fn.bind("foo.bar", handler);
// ...
$.event.trigger("foo.bar", { context: "lorem ipsum" });

However, it appears that my handler function is never even called.

Am I perhaps going about this the wrong way?

Answer 1

Have a look at:

Custom events in jQuery open doors to complex behaviors

jQuery Custom Events: They Will Rock Your World!

Answer 2

If you're using jQuery >1.4 then $() returns an empty jQuery collection which would mean that no event handler is actually bound to anything. Before 1.4 it would have returned the same as jQuery(document).

It might be better to simply have a global namespace (an actual object) and then add events to that:

var FOO = {};

$(FOO).bind("foo.bar", handler);

$(FOO).trigger("foo.bar", { context: "lorem ipsum" });