appendした要素をreplaceするとaddEventListenerが消える

Question

なぜかreplaceするとappendに設定されたaddEventListenerが動かなくなります
これはなぜでしょうか、又回避策をご存知でしたら教えて下さい

<script>
window.onload=function(){
var button = document.createElement('input');
button.id="btn";
button.type="button";
button.value="ボタン";
button.style.width="100px";
button.style.height="50px";
button.addEventListener('click', function() {
alert("hello");
});
button_div.appendChild(button);

d=button_div.innerHTML;
d=d.replace(d,d);
button_div.innerHTML=d;
}
</script>

<div id="button_div"></div>

Answer 1

innerHTMLを更新すると、その要素の子ノードはすべて作り直され、イベントリスナーがない状態になります。

こういった場合、要素が作られるたびにイベントリスナーを登録するのは手間なので、親のノードでイベントを聞くのが常套手段です。

document.addEventLisetner('click', e => {
  if (e.target.closest('#btn'))
    alert("hello");
});

Answer 2

イベントは個別要素に付与するもので、なぜreplaceしたいのか良く分かりませんが、replaceによってイベントが付与されない別の要素に生まれ変わる（と仮説）のだと思います。

回避策としては、HTML上の要素が確定した時点でイベント付与すること。

例えば

	d = button_div.innerHTML;
	d = d.replace(d, d);
	button_div.innerHTML = d;

	//ここから
	n = document.querySelector("#"+button_div.id+" "+button.tagName);
	n.addEventListener('click', function() {
		alert("hello");
	});

これは「動的に要素を画面上に追加する」場合も同じです。

Comments

[m.ts10806]

button.tagNameはあまりよくないか。