Ajaxで取得したjsonを表示させているのですが、動的に作成した要素にaddEventListenerが効きません。
js
1 xhr.onload = function(){ 2 let json = JSON.parse(xhr.response).items, 3 length = json.length, 4 fragment = document.createDocumentFragment(), 5 SearchResults = document.getElementById('SearchResults'); 6 for (let i = 0; i < length|0; i=(i+1)|0) { 7 let a = document.createElement("a"), 8 div = document.createElement("div"), 9 strong = document.createElement("strong"), 10 p = document.createElement("p"); 11 ・・・・・ 12 a.addEventListener("click", ggg(json[0].link)); 13 } 14 SearchResults.appendChild(fragment); 15 } 16function ggg(e) { 17 console.log(e); 18 }
途中しか書いていませんが、ここでは、作成した要素をクリックした際にコンソールに要素毎固有の数値を表示させようとしています。
HTML内にonclockとして記せば動作しますが、ホバー時(mouseover)にも動作させたくなったため、jsに書く必要があります。
js
1a.setAttribute("onclick", 'SiteResult("' + json[i].link + '");');
最初は生成したものをgetElementsByTagNameで取得しようとしていたのですが、生成したものにはaddEventListenerが効かないとわかり調べてみたところ、forループ内に書くようだったので書いてみました。
.
一応、最初に作ったものも置いておきます。
js
1for (let i = 0; i < length|0; i=(i+1)|0) { 2 let a = document.createElement("a"), 3 ・・・・・ 4 } 5let targets = document.getElementsByTagName('a'); 6for(let i = 0; i < targets.length|0; i=(i+1)|0){ 7 targets.addEventListener('mouseover', () => { 8 alert(`をクリックしました`); 9 10}, false); 11 12}
▲ 追記
このまま書き続けても要素毎固有の数値を取得できないと思うので、これではダメだと思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/23 16:02