How to handle custom jQuery events in Meteor?

Question

In Metor 0.3.5, when all events were jQuery events, I was able to use use jQuery UI Draggable and then handle the drag & dragstop events using a Metor event map:

Template.game.events['dragstop .card'] = function (e) {
    //stuff
};

But I just read this in the Meteor mailing list:

In 0.3.6, event maps no longer depend on jQuery

And sure enough, the above technique no longer seems to work – my dragstop handler isn't called at all now.

I'd greatly appreciate any advice as to how to achieve the same effect in 0.3.6.

Answer 1

Nowadays, you can simply use body events to accomplish this the "Meteor" way:

Template.body.events({
    'dragstop #somedivid': function(e) {
        // Do stuff
    }
});

Answer 2

Custom jQuery events can be bound with plain old jQuery, bypassing event maps altogether:

$(function () {
    $('body').on('dragstop', '.card', function (e) {
        //stuff
    });
});

Remember to use jQuery's on function to bind the handlers, since template elements are not necessarily included in the DOM at all times.