jQuery plug-in not working with Iron Router

Question

I'm new to Meteor so I'm trying some code. I'm testing a jQuery plug-in to bring stylish image hover effects and it works when I'm not using Iron router but simple templates - {{> home}} not {{> yield}} - instead. So, I have a simple masterLayout template:

<template name="masterLayout">
  <p> Base Layout!</p>
  <img id="chard" src="chard.png"/>
  {{> yield}}
</template>

and a test home page:

<template name="home"> 
   <p> HOME page! </p>
   <img id="home" src="image.png"/>
</template>

I call the jQuery plug-in on another js file:

$('#home, #chard').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});

I use Iron Router for routing and it works except that the jQuery effect doesn't. I've tried a few hooks and only achieved the image in the master Layout to respond, not the image on the home page. So, this should be very simple but, in fact, I'm not being able to make it work... Can someone help me out, please?

Answer 1

Maybe the jquery code is not executed because the template is not in DOM. I dont know how your plugin works but often like with google maps the javascript is attached in the rendered-callback of the template.

<template name="home"> 
 <p> HOME page! </p>
 <img id="home" src="image.png"/>
</template>

Template.home.rendered({
  $('#home, #chard').adipoli({
   'startEffect' : 'normal',
   'hoverEffect' : 'popout'
  });
});