我在强制物化自动完成在动态表上工作时遇到问题。它在表格的静态元素上运行良好。我正在使用js document.createElement。控制台告诉我 html 看起来是一样的： 表格动态元素的console.log(tbody)
...但就像之前提到的，只有表的静态元素显示自动完成下拉列表： 工作静态下拉列表：
我的代码：
*****HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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/css/materialize.min.css">
<meta charset="utf-8" />
<?!= include("page-css"); ?>
<script type="text/javascript" src="autosearch.js"></script>
</head>
<body>
<footer class="page-footer #2196f3 red">
<div class="container">
<table>
<tr>
<h3 style="text-align: center; vertical-align: middle;">Requested projects:</h3>
</tr>
</table>
</div>
</footer>
<br>
<br>
<div class="container-fluid" style="width:100%; font-size:13px; padding:0px; margin:0px;">
<table border = "1" id="tableData" class = "#eeeeee grey lighten-3" style="width:90%; margin: 0px auto; align: center;">
<thead>
<tbody>
<tr>
WORKING STATIC TEST OF AUTOCOMPLETE:
<td>
<th>
<div class="input-field">
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input"></label>
</div>
</th>
<td>
</tr>
</tbody>
<tr>
<th>Code</th>
<th>name</th>
<th>Please select project:</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<?!= include("page-js"); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
*****JS：
<script>
//EVENTS
//ON LOAD EVENT
window.addEventListener('load', () => {
loadingData();
}); //mozna tez DOMContentLoaded zamiast load
//DROPDOWN EVENT
document.addEventListener('DOMContentLoaded', function() {
// document.dispatchEvent(new Event('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems,{
data:{
'option 1':null,
'option 2':null,
'option 3':null
}, minLength: 0
});
});
//FUNCTIONS
function loadingData(){
//just loading rotating thing
}
function generateTable(dataArray){
console.log("generateTable")
var tbody = document.getElementById("table-body")
let numb = tbody.childNodes.length;
for (a = 1; a<numb; a++){
tbody.removeChild(tbody.firstElementChild);
}
dataArray.forEach(function(r){
var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[0];
row.appendChild(col1);
var col2 = document.createElement("td");
col2.textContent = r[1];
row.appendChild(col2);
var col3 = document.createElement("td");
//not working dynamic autocomplete
var th = document.createElement("th");
col3.appendChild(th);
var div = document.createElement("div");
div.setAttribute("class", "input-field");
th.appendChild(div);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "autocomplete-input");
input.setAttribute("class", "autocomplete");
div.appendChild(input);
var label = document.createElement("label");
label.setAttribute("for", "autocomplete-input");
input.appendChild(label);
row.appendChild(col3);
tbody.appendChild(row);
console.log(tbody)
const old_tbody = document.getElementById("table-body")
});
}
</script>
当然，这是一些愚蠢的错误（可能与事件有关），但我对网络应用程序很陌生，不知道我做错了什么。
我希望表格的动态元素（实现自动完成下拉列表）的工作方式与测试静态元素一样。
这是因为初始化具体化自动完成的唯一位置是在 DOMContentLoaded 的事件侦听器内。这就是为什么静态内容有效但动态内容无效的原因。
将初始化重新组织到自己的函数中是否有意义，您可以调用 DOMContentLoaded，但也可以在添加动态内容后根据需要调用？