(UPDATE) jQuery used in materialize only works through console

1

So im trying to use some features of materialize like the material box: materializecss.

The jQuery is supposed to load automatically. In the “Initialization” part of that page in the link it shows the jQuery that can be manually added. I tried adding that to the bottom of Meteor.isClient and it also doesnt work. The only way i can get the materialbox feature to work properly is to open the console and enter the the jQuery manually-$('.materialboxed').materialbox();

After that i am able to click on the images and have the materialbox feature work properly. Any idea whats going on here? How can this be fixed?

2

ok so found something strange. This doesnt work:
JS-

HTML-

but…this does work:
same JS but HTML change:

wtf is going on here?!

3

Same problem. JQuery doesnt’w work with {{#if}} statement in HTML code.

4

whenever you have #if or #each or #with in your template, it gets translated into javascript actually generating DOM for you. So if you have jQuery and want it to run on what you think is there, it will most likely fail because at the time when your jQuery fires the DOM is in fact NOT there yet.

This can be solved with sub-templates

<template name="entries">
 {{#each entry}}
  {{>entry}}
 {{/each}}
</template>

<template name="entry">
 <div class="entry col-md-4">
  <img class="materialboxed" src="....">
 </div>
</template>

and then have

Template.entry.onRendered(function(){
 this.$('.materialboxed').materialbox();
});

be sure to use this.$ so the jQuery is properly scoped to the DOM of the template.

1 Like