时间戳

首页 > 解决方案 > 单击时未打开模态（物化，jquery）

javascript - 单击时未打开模态（物化，jquery）

问题描述

我正在玩一个使用流星/物化/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>

但是，它们中的任何一个都没有按预期工作，并且模式不会打开。有谁知道我在这里做错了什么？

标签： javascriptjqueryeventsmodal-dialogmaterialize

解决方案

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

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

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

推荐阅读