FullpageJs and Meteor : Capture event from template

Question

I'm struggling with fullpage.js in Meteor.

When I add a button inside a template, the Template.templatename.events function does not fire on event.

For example:

Template HTML (messages.html)

<template name="messages">
<ul>
  {{#each mess}}
      <li>{{ messContent}}</li>
  {{/each}}
 
  <button class="addMessage">Add Message!</button>
</ul>

</template>

Template JavaScript (messages.js)

Template.messages.helpers({
  mess: function(){
    return Messages.find();
  }
});

Template.messages.events({
 'click .addMessage' : function(event){
   console.log("clicked")
 }
})

Main HTML

<head>
  <title>fulltest</title>
</head>

<body>
  {{> full}}
</body>

<template name="full">
<div id="fullpage">
  <div class="section active">
    <h1>First slide</h1>
  
    {{> messages}}
  
  </div>
  <div class="section">
    <h1>Second slide</h1>
   
  </div>
</div>
</template>

My fullpage initialisation:

Template.full.rendered = function(){
  $('#fullpage').fullpage();
}

If I remove the fullpage initialisation then the click event gets logged. Still new at Meteor, I didn't manage to grasp what's going wrong here.

All help much appreciated, Joris

dont know if it helps but maybe use something like : Template.full.onRendered(function(){ this.$("#fullpage").fullpage(); }) — Marius Darila
I've tried that, but it didn't really make a difference. Thanks for suggesting, though — DeBaze

Alvaro Alvaro · Accepted Answer · 2015-03-26T13:07:14

Use delegation or use verticalCentered:false and scrollOverflow:false.

From the fullPage.js FAQs:

My javascript/jQuery events don't work anymore when using fullPage.js

Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

FullpageJs and Meteor : Capture event from template

1 Answers