javascript - innerHTMLを追加した後にaddEventListenerがなくなりました

Question

さて、javascript/greasemonkeyを使用して次のhtmlをサイトに追加しました。（サンプルのみ）

<ul>
 <li><a id='abc'>HEllo</a></li>
 <li><a id='xyz'>Hello</a></li>
</ul>

また、要素のクリックイベントリスナーも追加しました。この時点まではすべて正常に機能し、要素をクリックするとクリックイベントが発生します。

しかし...私はスクリプトに別の関数を持っています。それは特定の条件でそのhtmlを変更します。つまり、それを追加するので、次のようになります。

<ul>
 <li><a id='abc'>Hello</a></li>
 <li><a id='xyz'>Hello</a></li>
 <li><a id='123'>Hello</a></li>
</ul>

しかし、これが行われると、最初の2つの要素に追加したリスナーが壊れます...クリックしても何も起こりません。

追加を行う関数の呼び出しをコメントアウトすると、すべてが再び機能し始めます！

助けてください...

Answer 1

プロパティを設定するたびに、innerHTMLそこに設定されていた以前のHTMLを上書きします。これには連結代入が含まれます。

element.innerHTML += '<b>Hello</b>';

書くのと同じです

element.innerHTML = element.innerHTML + '<b>Hello</b>';

これは、HTML属性を介してアタッチされていないすべてのハンドラーが「デタッチ」されることを意味します。これは、それらがアタッチされた要素が存在しなくなり、新しい要素のセットが代わりに使用されるためです。以前のすべてのイベントハンドラーを保持するには、以前のHTMLを上書きせずに要素を追加する必要があります。createElementこれを行う最良の方法は、やなどのDOM作成関数を使用することですappendChild。

var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl  = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);

Answer 2

バリアントとして、このようなhtmlを追加できます。これは、addEventListenerなしで機能します。

<ul>
 <li><a id='abc' onclick='myFunc()'>Hello</a></li>
 <li><a id='xyz' onclick='myFunc()'>Hello</a></li>

 // The following add dynamically
 <li><a id='123' onclick='myFunc()'>Hello</a></li>
</ul>

Answer 3

UはjQueryの「ライブ」関数も使用できます