Does Meteor or Iron Router interfere with jQuery events on anchor tags?

Question

I am using a third-party theme that uses an anchor tag to toggle the visibility of a left menu on click. Everything was working fine until around the time that I started segmenting my HTML into partials and installed Iron Router. Am I probably just overlooking a bug somewhere, or does Meteor/IronRouter require that I do something specific to handle all jQuery events on anchor tags? Do I need to change all jQuery events to be aware of page updates (via on())? This particular element does not have an href= attribute and I do not expect the URL to change.

Answer 1

The key phrase here turned out to be "segmenting my HTML into partials", as my problem is not related to Iron Router. Once you start placing HTML into templates, you cannot rely on the jQuery that is written into the theme to be aware of page updates that are the very essence of Meteor. For example, my theme contains the following code:

$('.menutoggle').click(function(){
    // do things
});

This must in fact be changed to use the on() function:

$(document).on('click', '.menutoggle', function() {
    // do things
});

Or perhaps better yet, registered with my template:

Template.mypartialname.events({
   'click .menutoggle': function() {
        // do things
   }
});

Answer 2

Iron Router intercepts click events on links so that it can handle them itself. This can certainly break the functionality of your plugin. If your theme allows to handle the change by another element, that's the perfect solution. Things like toggling menu visibility could be managed by clicking on buttons or even divs.

If changing the toggle element is not possible, you need to tell Iron Router not to intercept that particular anchor. See this question for details.