在下面的示例代码中,我将onclick事件处理程序附加到包含文本"foo"的span.处理程序是一个匿名函数,弹出alert().
但是,如果我分配给父节点alert(),则此innerHTML事件处理程序将被销毁 - 单击"foo"将无法弹出警告框.
这可以解决吗？
<html>
<head>
<script type="text/javascript">
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";
}
</script>
</head>
<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan">foo</span>
</div>
</body>
</html>
我有这个动态创建的布局：
for (let i = 1; i < 10; i++) {
document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="name"><a href="#" id="title` + i + `">Name</a></h4>
<h4>
<small>state</small>
</h4>
<h4>
<small>city</small>
</h4>
<h4>
<small>zip</small>
</h4>
</div>
<div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
</div>
</div>
`
document.getElementById("title" + i).addEventListener('click', function() {
console.log(i)
});
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
<!-- person --> …