javascript - 点击时模态未打开(materialize、jquery)

Question

我正在使用一个使用meteor/materialize/jquery 构建的示例笔记管理器应用程序。

我遇到了问题，当单击按钮时，我的模式没有像应有的那样弹出。

这是我的模式的代码:

<template name="add">
 <div id="addNote" class="modal">
  <div class="modal-content">
   <h3>Add Note</h3>
   <form class="add-form">
    <input type="text" name="text" placeholder="Add note...">
   </form>
  </div>
 </div>
</template>

这是一个按钮，按下该按钮后应打开模式。

<li class="nav-item">
 <button id="addNote" class="waves-effect waves-light btn" href="#addNote">Add Note</button>
</li>

我还有这个 jquery 代码，显然是为了初始化模式。

<script>
 $(document).ready(function(){
 $('.modal').modal();
});
</script>

当我单击按钮时，模式不会像我认为的那样弹出。

当我添加这一行代码时，重新加载页面时默认会打开模式。

<script>
 $(document).ready(function(){
  $('.modal').modal();
  $('#addNote').modal('open');
});
</script>

因此我认为通过做诸如

之类的事情

<script>
  $('#addNote').click(function() {
   $('#addNote').modal('open');
});
</script>

或者通过这样做

<button onclick="myFunction()"></button>

但是，它们都没有按预期工作，并且模式将无法打开。有谁知道我在这里做错了什么？

Answer 1

发生这种情况可能是因为按钮和 div 具有相同的 id“addNote”。尝试更改按钮的 id，然后更改 jQuery 脚本。

<button id="addNoteButton" class="waves-effect waves-light btn" 
href="#addNote">Add Note</button>

<script>
 $('#addNoteButton').click(function() {
   $('#addNote').modal('open');
  });
</script>