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");
}

.on - Attach an event handler function for one or more events to the selected elements. what is the event here? — zod, Jun 19 '13 at 23:45
rolled question back to original state to reflect the root problem — Kirby, Nov 25 '15 at 22:32

score 6 · Accepted Answer · answered Jun 19 '13 at 23:49

6

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.

answered Jun 19 '13 at 23:49

Sushanth --

55,259
9
66
105

4

Sure you can. Executing `$("body").trigger("test");` in the console will work. Why wouldn't it work? `$` is a global variable. – Šime Vidas Jun 20 '13 at 00:35
My apologies on the syntax error. Didn't know that an event listener wouldn't hear an event happening outside of its closure. Thanks! – JJK Jun 20 '13 at 00:36

score 4 · Answer 2 · answered Jun 19 '13 at 23:46

4

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");
}

answered Jun 19 '13 at 23:46

Robert Waddell

879
7
15

How to trigger custom event with jQuery?

2 Answers2

Linked