JavaScript insertAdjacentHTML 打开新模式不起作用

Question

我正在尝试使用 insertAdjacentHTML 打开模式，所以问题是 insertAdjacentHTML 模式在插入到 DOM 时没有打开。我只能假设我错过了一个简单的概念。请帮忙 ：）// ----------------Models Materialize Framework----------------document.addEventListener('DOMContentLoaded', function() {  let elems = document.querySelectorAll('.modal');  let instances = M.Modal.init(elems);});// Add Extra Columsconst addMoreBtn = document.getElementById("addmorebtn");const addColums = document.getElementById("addcolumns");addMoreBtn.addEventListener('click', (e) => {e.preventDefault();  const first =   `<div id="addcolumns"><!--  Button / Modal / Form Inputs --><!--  Button  --> <div class="row">  <div class="col s12 center">    <a href="#exercise1" class="disabled-exersice-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">      <i class="material-icons white-text">add </i>    </a>  </div> <!--  Modal  --> <div class="modal modal-position" id="exercise1">  <div class="valign-wrapper center-align">   <div class="row">    <form class="exercises-form col s12 valign-wrapper center-align" autocomplete="off">      <div class="input-field">             <input type="text" placeholder="Exercise:" id="autocomplete-input" class="autocomplete center">        <label for="autocomplete-input"></label>        <div class="removebtn-padding">          <input class="modal-close btn black" type="submit" value="Submit">       </div>       </div>    </form>   </div>       </div></div></div>     `   const position = "afterend";   addColums.insertAdjacentHTML(position, first);});

Answer 1

您需要在添加后初始化添加到 DOM 的任何新模式。

var elems = document.querySelectorAll('.modal');

var instances = M.Modal.init(elems);