物化css模态不能通过JS innerHTML插入工作

Question

我正在尝试使用JS innerHTML函数插入Materialise 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组件实际上会工作时你需要重新初始化该组件。如下面的codepen我已经重新初始化函数底部的模态，它工作正常。

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();
}

正如你所提到的，你是在一个循环中加载模态所以我建议在循环结束时初始化模态，你加载所有的模态，然后初始化模态。

注意：还请更新它看起来过时的materialize css js文件链接。