javascript - 使用innerhtml中外部加载的内容刷新javascript对象

Question

当我尝试加载可折叠的内容时，它在通过 JavaScript 加载时不起作用。但当我硬编码它时它确实有效。

我有以下代码

var VeilingenZoeken = document.getElementById("VeilingenZoeken");

function getZoekResultaten() {
    // console.log(rubriekenzoeken.value);
    const url = "backend/veilingen/VeilingenZoekresultaat.php?q=" + VeilingenZoeken.value;
    fetch(url)
        .then(
            response => response.text()
        ).then(
        html => document.getElementById("veilingItems").innerHTML = html
    );
}

由这个 html 标签调用

<input class="center" type="text" placeholder="Veilingen zoeken..." name="VeilingenZoeken"
               id="VeilingenZoeken" onkeypress="getZoekResultaten();"> <br>

它将加载到下面的 html 中

<div class="col s12">
   <ul class="collapsible">       
      <li>
         <div class="collapsible-header"><i class="material-icons">gavel </i> Gebruikersnaam: <span class="badge"><i  class="material-icons white">info</i></a></span><a class="waves-effect waves-light btn-large" href="#">Wave</a></div>
      </li>
  </ul>

但是，这样加载时，可折叠功能不起作用。有什么办法可以强制加载吗？

注意: 我认为标题有点令人困惑，但我不知道还有什么标题适合这篇文章。

Answer 1

使用 jQuery 时，您可以通过调用 M.Collapsible.init() 或 collasible() 来手动初始化可折叠元素

https://materializecss.com/collapsible.html#intialization

Initialization

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.collapsible');
  var instances = M.Collapsible.init(elems, options);
});

// Or with jQuery

$(document).ready(function(){
  $('.collapsible').collapsible();
});

因此，只需在加载内容后调用即可

var container = document.getElementById("veilingItems");
fetch(url)
 .then(response => response.text())
 .then(html => {
   container.innerHTML = html;
   M.Collapsible.init(container.querySelector('.collapsible'));
   //or if using jQuery
   $('.collapsible').collapsible();
 });

演示

var html = `<ul class="collapsible">
    <li>
      <div class="collapsible-header">
        <i class="material-icons">gavel</i> Gebruikersnaam:
        <span class="badge">
          <i class="material-icons white">info</i> 
        </span>
        <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      </div>
      <div class="collapsible-body">Body</div>
    </li>
    <li>
      <div class="collapsible-header">
        <i class="material-icons">gavel</i> Gebruikersnaam:
        <span class="badge">
          <i class="material-icons white">info</i> 
        </span>
        <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      </div>
      <div class="collapsible-body">Body</div>
    </li>
  </ul>`;
var container = document.getElementById("veilingItems");
document.querySelector('button').addEventListener('click', () => {
  container.innerHTML = html;
  var collapse = container.querySelector('.collapsible');
  M.Collapsible.init(collapse);
});

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<div id="veilingItems"></div>
<button>Load</button>