How to trigger custom event with jQuery?

Question

I'm attaching a custom event handler to the body in jQuery's ready method.
Afterwards I immediately trigger the custom event but nothing seems to happen.

$(function(){
    $("body").on("test", function(){ alert("test triggered"); }
    $("body").trigger("test");
}

Answer 1

Firstly you have a syntax error

$(function(){
    $("body").on("test", function(){
        alert("test triggered");
    });  < ---- Missing this
    $("body").trigger("test");
});

Secondly you cannot trigger the event from the console , as $(function() {}); forms a closure and you will not have access to any of the methods inside them

For it to work like you are expecting , put a debug point in your script file and then try to trigger the event. It works now as the events are in scope.

Answer 2

It looks like your code is not formatted correctly. Check your debug console to confirm.

You can try this:

$(function(){
    $("body").on("test", function(){
        alert("test triggered");
    });
    $("body").trigger("test");
}