Question

I’m trying to fire custom events using jquery but for some reason I can’t seem to fire and/or capture them.

I’m using a jstree plugin to create a file system with folders:

$('.filetree.global, .filetree.workspace').bind('select_node.jstree', function (event, data) {
    alert('test ');
    $(document).trigger( 'filePick').trigger( 'folderPick' );
}).jstree({
    /*stuff*/
});

Further down the code I’m binding the filePick and folderPick events to elements with a specific class and tell them to alert a test message whenever they catch the event:

$('.folder-action').bind( 'folderPick', function(e, data) {
    alert('test 2');
} );

Unfortunately the alert never gets triggered and I don’t know why. The jquery documentation seems pretty clear to me and I followed a different tutorial which also seems to indicate that my code should work but it just isn’t! ARGH!

‘test 1’ gets alerted but not ‘test 2’. Also, I installed Eventbug (Firebug extension) and I can see that my bindings to filePick are registered which leads me to believe that filePick and folderPick are just never fired.

Answer 1

jQuery events bubble up, but not down. This means that when you trigger the event on the document, it will not trigger down to elements inside the document. You can either trigger the event on that element, or trigger the event globally.

To trigger on that element, do this:

$('.folder-action').trigger( 'folderPick' );

To trigger the event globally so all subscribed elements get the event, do this:

$.event.trigger( 'folderPick' );