javascript - 在 innerhtml 中使用外部加载的内容刷新 javascript 对象
问题描述
当我尝试加载可折叠文件时,它在通过 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>
但是,以这种方式加载时,可折叠功能不起作用。有什么办法可以强制加载吗?
注意: 我认为标题有点混乱,但我不知道还有什么适合这篇文章的标题。
解决方案
M.Collapsible.init()
您可以通过调用或collasible()
在使用 jQuery 时手动初始化可折叠元素
https://materializecss.com/collapsible.html#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>
推荐阅读
- python - 通过迭代熊猫中的连续行创建一个新列
- css - 引导按钮不会向右移动
- c# - 在 C# 的 Datagridview 中选择当前行时从 arraylist 中删除一个项目
- python - 熊猫索引缺失值
- bash - grep 查找 grep 时出错:f: 没有这样的文件或目录
- javascript - 捕获的 webm 视频错误 *已更新
- ssl - 使用 DCOS 负载平衡器设置 SSL 终止
- javascript - 使用javascript使用同一台相机读取QR码和条形码?
- firebase - 从云函数中删除 Firestore 文档中的字段
- android - AndroidKeyStore 中检索根证明证书的别名是什么?