次のコード例で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]
コメントを追加