Fullpage Js 和 Meteor：从模板捕获事件

Question

我正在为 Meteor 中的 fullpage.js 苦苦挣扎。

当我在模板中添加按钮时，Template.templatename.events 函数不会触发事件。

例如：

模板 HTML (messages.html)

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

</template>

模板 JavaScript (messages.js)

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

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

主要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>

我的整页初始化：

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

如果我删除整页初始化，则会记录点击事件。在 Meteor 还是新手，我没能弄清楚这里出了什么问题。

非常感谢大家的帮助，乔里斯

Answer 1

使用委派或使用 verticalCentered:false 和 scrollOverflow:false。

来自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.

Fullpage Js 和 Meteor：从模板捕获事件

FullpageJs and Meteor : Capture event from template

meteor

fullpage.js