javascript - Materialize css modal 无法通过 JS innerHTML 插入工作

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:演示已修复，仍然代表问题，但反射(reflect)了它不能更好地工作的实际原因。

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 文件链接，它看起来已过时。