動的に生成した要素にaddEventListenerが効かない

Question

Ajaxで取得したjsonを表示させているのですが、動的に作成した要素にaddEventListenerが効きません。

    xhr.onload = function(){
      let json = JSON.parse(xhr.response).items,
          length = json.length,
          fragment = document.createDocumentFragment(),
          SearchResults = document.getElementById('SearchResults');
      for (let i = 0; i < length|0; i=(i+1)|0) {
        let a = document.createElement("a"),
            div = document.createElement("div"),
            strong = document.createElement("strong"),
            p = document.createElement("p");
　　・・・・・
        a.addEventListener("click", ggg(json[0].link));
      }
      SearchResults.appendChild(fragment);
    }
function ggg(e) {
    console.log(e);
  }

途中しか書いていませんが、ここでは、作成した要素をクリックした際にコンソールに要素毎固有の数値を表示させようとしています。

HTML内にonclockとして記せば動作しますが、ホバー時（mouseover）にも動作させたくなったため、jsに書く必要があります。

a.setAttribute("onclick", 'SiteResult("' + json[i].link + '");');

最初は生成したものをgetElementsByTagNameで取得しようとしていたのですが、生成したものにはaddEventListenerが効かないとわかり調べてみたところ、forループ内に書くようだったので書いてみました。
.
一応、最初に作ったものも置いておきます。

for (let i = 0; i < length|0; i=(i+1)|0) {
        let a = document.createElement("a"),
　　・・・・・
      }
let targets = document.getElementsByTagName('a');
for(let i = 0; i < targets.length|0; i=(i+1)|0){
  targets.addEventListener('mouseover', () => {
        alert(`をクリックしました`);

}, false);

}

▲ 追記

このまま書き続けても要素毎固有の数値を取得できないと思うので、これではダメだと思います。

Answer 1

こんにちは。

ご質問に挙げられている1つ目のコードで、関数 gggは、

function ggg(e) {
    console.log(e);
}

となっており、 return がないので、ggg(e)は何も返しません。つまり、

ggg(json[0].link)

は、undefined となるので、

a.addEventListener("click", ggg(json[0].link));

は、clickハンドラとして、undefinedを設定することになってしまいます。
ですので、gggを以下のようにしてみるといかがでしょうか？

function ggg(e) {
  return () => { 
    console.log(e);
  };
}

参考になれば幸いです。

Comments

[2001Y]

僕には理解できませんでしたが、無事動作するようになりましたありがとうございます。