Zurb Foundation plugins work only after I refresh the page

help
1

I am using Zurb Foundation in my Meteor app. When I click a link and am taken to a page, the Foundation tabs and accordions do not work–nothing happens when I click on them. But after I refresh the page the tabs and accordions work like normal. Does anyone know what is going on and how I can fix this problem?

Unfortunately my app is located on my local machine right now, so I don’t have a demo to show you.

Thank you for your help!

2

I was able to fix this issue. This documentation gave me a clue: http://foundation.zurb.com/sites/docs/javascript.html#adding-plugins-after-page-load.

The problem that I had was that I was calling the following function on my main layout template only:

Template.layout.onRendered(function() {
  $(document).foundation();
});

…but when my other templates were being called, the Foundation plugins were not being initialized on those other templates. I should have been using the above code block in each individual template’s JavaScript file to re-call the .foundation() function for the corresponding templates.

3

So what did the final template code look like? Was it still $(document).foundation(); but in each template or did you use a different selector?