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 Colums

const 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);