Question

我正在尝试使用JS innerHTML函数插入Materialize CSS模式，但该模式不再起作用，不确定为什么。正常情况下，它可以在文档中工作。

  $(document).ready(function(){
    $('.modal-trigger').leanModal();
    insertModal();
  });

function insertModal(){
  var html = '';
  html += '<div class="col"><a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> </div>';
  //Modal Structure
  html += '<div id="modal1" class="modal">';
  html += '<div class="modal-content"><h4>Modal Header</h4><p>A bunch of text</p></div>';
  html += '</div>';
  document.getElementById('modal-test').innerHTML = html;
}

这是我遇到的https://codepen.io/RelativeBinary/pen/YBbmrg?editors=1010

问题的演示

我计划有一个循环，该循环将基于对象数组插入一堆模态，因此每个模态将包含不同的信息，这就是为什么我从JS插入的原因，因此我不必手动键入每个模态每个不同对象的模态。

任何建议将不胜感激。

PS：演示是固定的，仍然代表问题，但反映了其无法更好地工作的实际原因。

Answer 1

您一切都很好。我不确定为什么要使用leanModal来实现CSS模态，但是当您插入任何新的javascript组件时，实际上需要执行的工作是需要重新初始化该组件。像下面的代码笔一样，我已经在函数底部重新初始化了模态，并且可以正常工作。

https://codepen.io/bilal-ahmad/pen/vbqWrd?editors=1010

<div id="modal-test" class="row section">
</div>

  $(document).ready(function(){
    insertModal();
  });

function insertModal(){
    var html = '';
    html += '<div class="col"><a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> </div>';
   //Modal Structure
   html += '<div id="modal1" class="modal">';
   html += '<div class="modal-content"><h4>Modal Header</h4><p>A bunch of text</p></div>';
   html += '</div>';
   document.getElementById('modal-test').innerHTML = html;
   $('.modal').modal();
}

您提到要在循环中加载模态，所以我建议在循环末尾初始化模态，在该循环中加载所有模态，然后初始化模态。

注意：请同时更新您看起来过时的物化css js文件链接。

物化CSS模态无法通过JS innerHTML插入工作

1 个答案: