jQuery插件不适用于Iron Router [英] jQuery plug-in not working with Iron Router

问题描述

我是Meteor的新手，所以我正在尝试一些代码.我正在测试jQuery插件以带来时尚的图像悬停效果，并且当我不使用Iron路由器而是使用简单的模板-{{> home}}而不是{{> yield}}时，它可以工作. 因此，我有一个简单的masterLayout模板:

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>

和测试主页:

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

我在另一个js文件中调用jQuery插件:

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

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

我使用Iron Router进行路由，除了jQuery效果不起作用外，它均有效. 我尝试了一些挂钩，仅实现了主布局中的图像来响应，而不是主页上的图像. 因此，这应该非常简单，但实际上，我无法使其工作... 有人可以帮我吗?

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?

推荐答案

也许由于模板不在DOM中而没有执行jquery代码.我不知道您的插件如何工作，但通常与Google Maps一样，JavaScript附加在模板的渲染回调中.

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'
  });
});

这篇关于jQuery插件不适用于Iron Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！