在以下示例代码中,我将onclick
事件处理程序附加到包含文本“ foo”的范围。该处理程序是一个匿名函数,会弹出一个alert()
。
但是,如果我将其分配给父节点的innerHTML
,则此onclick
事件处理程序将被销毁-单击“ 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>
不幸的是,innerHTML
即使您要附加,分配给也会导致所有子元素的破坏。如果要保留子节点(及其事件处理程序),则需要使用DOM函数:
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
mydiv.appendChild(document.createTextNode("bar"));
}
编辑:鲍勃的解决方案,从评论。发表您的答案,鲍勃!为此获得信誉。:-)
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
var newcontent = document.createElement('div');
newcontent.innerHTML = "bar";
while (newcontent.firstChild) {
mydiv.appendChild(newcontent.firstChild);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句