jQuery inside each loop meteor not works

问题:

i everyone,

i have a problem that has already happened to me in another case, but I present this hoping that we can solve it:

The jquery (called on "rendered") works well when it is not generated by eachloop ... why not work in generated html?

i click on an image generated by eachloop and nothing happens

gallery.html

    {{#each gallery}}         <div class="superbox-list">             <img src="images/superbox/superbox-thumb-1.jpg" data-img="images/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">         </div>     {{/each}}         <div class="superbox-list">             <img src="images/superbox/superbox-thumb-1.jpg" data-img="images/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">         </div>         <div class="superbox-list">             <img src="images/superbox/superbox-thumb-2.jpg" data-img="images/superbox/superbox-full-2.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Bridge of Edgen" class="superbox-img">         </div>

gallery.js

Template.gallery.rendered = function(){     $('.superbox').SuperBox(); }  Template.gallery.helpers({     gallery: function(){         return Gallery.find();     } });

Example, Image 1 Image 2

best regards, ty

EDIT:

I used this way and it worked, although not find the method defer in meteor docs!

_.defer(function () {   $('.superbox').SuperBox(); });

回答1:

I used this way and it worked, although not find the method defer in meteor docs!

_.defer(function () {   $('.superbox').SuperBox(); });

回答2:

Your issue is probably that the data isn't there when your gallery is first rendered. You can fix that by waiting on the subscription using iron-router's waitOn (if you're using iron-router) but that only solves the problem of the documents that are in the database on page load. Any new documents wouldn't be "superBox'd" either. So the way around that is to have a specific template for each Gallery row. Your each becomes:

{{#each gallery}}     {{> galley_row }} {{/each}}

You add a new template:

<template name="gallery_row">     <div class="superbox-list">         <img src="images/superbox/superbox-thumb-1.jpg" data-img="images/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">     </div> </template>

Then whenever your new template is rendered (each iteration of the #each loop):

Template.galley_row.rendered = function () {     $('.superbox').SuperBox(); });

转载请标明出处:jQuery inside each loop meteor not works

文章来源: jQuery inside each loop meteor not works