两次点击即可加载Modal和SideNav（使用Materialize的Meteor）

Question

两次点击即可加载Modal和SideNav（使用Materialize的Meteor）

3

我在Meteor中使用Materialize导航时遇到了一个奇怪的问题。奇怪的是，当我点击导航中的链接时，侧边栏或模态框只有在第二次点击时才会加载。因此，我必须先单击链接（什么也不会发生），然后再次单击以显示元素。之后，元素将在任何单击时加载（只需单击一次）。

我从未遇到过这个问题，我认为它可能是Materialize的问题。然而，在排除Materialize之前，我想与你们确认一下，看看我是否可能调用我的JQuery函数错误或其他原因。以下是代码：

header.html:

<template name="header">
  <nav>
    {{> sideNav}}
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center"><span class="light"></span>hamok</a>
      <ul id="nav-mobile" class="left">
        <li><a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a></li>
        <li><a href="#"><i class="mdi-action-search left"></i>Search</a></li>
      </ul>
      <ul id="nav-mobile" class="right">
        {{#if currentUser}}
          <li><a id="logout">Sign out</a></li>
        {{else}}
        <li><a class="modal-trigger-login" href="#loginModal">Account<i class="left mdi-action-account-circle"></i></a></li>
        {{/if}}
      </ul>
    </div>
  </nav>

  {{> loginModal}}
</template>

<template name="loginModal">
  <div id="loginModal" class="modal">
    <div class="modal-content">
      {{> atForm}}
    </div>
  </div>
</template>

<template name="sideNav">
  <ul id="slide-out" class="side-nav">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
</template>

header.js

Template['header'].helpers({

});

Template['header'].events({
  'click .modal-trigger-login': function() {
    $('.modal-trigger-login').leanModal();
  },

  'click #logout': function() {
    Meteor.logout();
  },

  'click .button-collapse': function() {
    $(document).ready(function(){
      $(".button-collapse").sideNav();
    });
  }
});

感谢大家查看！

- zenben1126

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- saimeunt · Accepted Answer

leanModal 的作用是初始化 jQuery 插件，因此它应该在模板 onRendered 函数内调用，而不是在单击模态框触发按钮时调用。

Template.header.onRendered(function(){
  this.$(".modal-trigger-login").leanModal();
});

你可以移除你的click .modal-trigger-login事件：现在需要两次点击，因为第一次点击只是初始化插件。

同样，你的sideNav初始化调用应该在onRendered生命周期事件中进行。

Template.header.onRendered(function(){
  this.$(".button-collapse").sideNav();
});