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时，您可以通过调用collasible()或document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.collapsible'); var instances = M.Collapsible.init(elems, options); }); // Or with jQuery $(document).ready(function(){ $('.collapsible').collapsible(); });来手动初始化可折叠元素

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

<强>初始化

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

演示

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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

1 个答案: