单击时未打开模态（物化，jquery）答案

【问题标题】：Modal not opening on click (materialize, jquery)单击时未打开模态（物化，jquery）
【发布时间】：2018-05-14 22:46:56
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery events modal-dialog materialize

【解决方案1】：

这可能是因为按钮和 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>

【讨论】：

我将实施您的建议，因为我认为将它们单独重命名只是一种好习惯，尽管即使在实施了这些更改之后，问题仍然存在。

【解决方案2】：

这已经是一个老问题并且已经找到了解决方案（尽管没有公认的答案？），但现在一直在玩这个。我认为一些澄清会有所帮助。

那是你的全部代码吗？如果没有，请检查是否首先启动了 .modal。

$('.modal').modal();

您在后续步骤中描述详细信息时省略了该部分。

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

【讨论】：

【解决方案3】：

可以通过以下代码修复

<li class="nav-item">
 <button name="addNoteButton" class="waves-effect waves-light btn" href="#addNote" onclick="$('#addNote').modal('open');">Add Note</button>
</li>

【讨论】：

【解决方案4】：

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
<div class="row section">
  <div class="col">
    <!-- Modal Trigger -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
    <p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from <a href="http://materializecss.com/getting-started.html">CDN (getting started)</a>.
  </div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

【讨论】：

【解决方案5】：

使用materialize css打开模型

我认为您必须在触发按钮上指定一个模态触发器，如下所示。试试看吧。

HTML

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

JS

<script type="text/javascript">
    $(function(){
      //the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $(".modal").modal();
    });
</script>

【讨论】：

【解决方案6】：

如果按照materialize css的指南，我遇到了这个错误，才发现是导入顺序，你必须在导入materialize.js之前导入jQuery！

【讨论】：