jquery trigger custom global event

Question

I would like to do something like this

$("#A").on("click", function(){
    $.event.trigger({type:"custom"});
});
$("#B").on("custom", function(e){
    $("#B").removeClass("hidden");
});
$("#C").on("custom", function(e){
    alert("something");
}

Where I trigger a custom event using JavaScript. I would then like to be able to use the .on function on different elements throughout the page. Clicking the "#A" would then trigger the event for all registered elements.

I noticed that the trigger function is called on an element instead of globally, which is not what I want.

Fiddle

[Amplify](http://amplifyjs.com/api/pubsub/) is an excellent, tiny library that will give you a global pub/sub system. — Evan Davis, May 21 '14 at 12:17
Just change $.event.trigger({type:"custom"}); to $('*').trigger('custom'); — Conny Olsson, Apr 18 '16 at 09:39

score 15 · Answer 1 · answered May 21 '14 at 13:12

I'm not sure I understand your question, but if you change your code to this:

$("#A").on("click", function(){
    $(document).trigger("custom");
});
$(document).on("custom", function(e){
    $("#B").removeClass("hidden");
});
$(document).on("custom", function(e){
    alert("something");
});

It should work. Here's a demo

jquery trigger custom global event

1 Answers1