Javascript addEventListenerが特定の要素で機能していない

Question

私は奇妙な問題に遭遇しています：Javasriptを使って8種類のHTML要素を作成します（それぞれほぼ同じ方法で）イベントリスナーが追加されていません。ここで

はうまく機能要素の一つのコードです：

var primaryProductNameLink = document.createElement("a"); 
primaryProductNameLink.setAttribute("id", "primaryProductNameLink"); 
primaryProductNameLink.setAttribute("href", result.primaryProduct.pageLink); 
primaryProductNameLink.setAttribute("data-resultRequestID", getResultResponse.resultRequestID); 
primaryProductNameLink.setAttribute("data-linkName", "primaryProduct"); 
primaryProductNameLink.addEventListener("click", clickedLinkInResultSection); 

をI：

var primaryProductImageLink = document.createElement("a"); 
primaryProductImageLink.setAttribute("id", "primaryProductImageLink"); 
primaryProductImageLink.setAttribute("href", result.primaryProduct.pageLink); 
primaryProductImageLink.setAttribute("data-resultRequestID", getResultResponse.resultRequestID); 
primaryProductImageLink.setAttribute("data-linkName", "primaryProduct"); 
primaryProductImageLink.addEventListener("click", clickedLinkInResultSection); 

そしてここでは、イベントリスナーが適用されていない要素のコードですキャッシュのクリア、変更のアップロード、ページの表示次のコマンドを実行すると、イベントリスナーが最初の要素に追加されますが、2番目の要素には追加されません。

getEventListeners（document.getElementById（ "primaryProductImageLink"））;
{click：Array（1）}
getEventListeners（document.getElementById（ "primaryProductNameLink"）））;
{}

私は私のJavascriptの一番最後に次のコードを追加する場合は、イベントリスナーが正常にprimaryProductNameLink要素に追加されます。

document.getElementById("primaryProductNameLink").addEventListener("click", clickedLinkInResultSection); 

検証：

getEventListeners（document.getElementById（ "primaryProductNameLink"））;
{クリック：配列（1）}

私はこの要素に異なるイベントリスナーを追加しようとしているが、どれも働いていません。私もテスト属性を追加して、うまく表示されます。テストコード：

var primaryProductNameLink = document.createElement("a"); 
primaryProductNameLink.setAttribute("id", "primaryProductNameLink"); 
primaryProductNameLink.setAttribute("href", result.primaryProduct.pageLink); 
primaryProductNameLink.setAttribute("data-resultRequestID", getResultResponse.resultRequestID); 
primaryProductNameLink.setAttribute("data-linkName", "primaryProduct"); 
primaryProductNameLink.addEventListener("mouseover", function() { console.log("test"); }); 
primaryProductNameLink.addEventListener("mouseout", function() { console.log("test"); }); 
primaryProductNameLink.addEventListener("click", clickedLinkInResultSection); 
primaryProductNameLink.setAttribute("data-test", "test"); 

結果： 。

私は自分のJavascriptファイル全体を見渡しましたが、 "primaryProductNameLink"への参照はありません。これはイベントリスナーを削除する可能性があります。

私は回避策があることを知っています（スクリプトの最後にイベントリスナーを追加して示したような）が、私は本当に興味があり、この問題の原因を知りたいと思っています。ありがとう！

EDIT：フルJavascriptがここで見つけることができます：https://jsfiddle.net/fbchm4ov/（4つの質問が回答された後、私の記事で説明した要素のみが生成されます。）私はあなたがprimaryProductNameLinkprimaryProductInfoDivに以降後に追加することをお読みフィドルから

Answer 1

primaryProductInfoDiv.innerHTML +=を使用してprimaryProductInfoDivを変更します。

innerHTMLプロパティを設定すると、そこに設定されている既存のHTMLを上書きします。

primaryProductInfoDiv.innerHTML += '<br>'; 

を行う

は、基本的には現在のinnerHTMLの構造に加えて<br>を使用して、新しいHTML構造を作成し、innerHTMLプロパティに割り当てています。あなたのイベントハンドラは新しいinnerHTMLではなく、古いinnerHTMLにアタッチされています。

連結を行う代わりに、createElementとappendChildを使用して、このような問題を回避できます。