###ajaxの返り値にイベント登録をしたい
ajaxの返り値がhtmlなのですが、返り値であるhtmlデータの中から特定の要素に対してイベント登録(クリックイベント)を行いたいです。
実装してみたのですが、簡単にまとめると下記の通りです。
・ページロード時点で1つ存在する「もっと見る」ボタンを押下でajax開始
・データ返却時点でdocument.querySelectorAll('btn-more')
にイベント登録
このような感じで実装しているものの、データ返却の度にdocument.querySelectorAll('btn-more')
にイベント登録するのが個人的には回避したいなと思っています。
(何度も登録するのは回避したいなと思ったのです)
###お伺いしたいこと
本当ならajaxの返り値の中のbtn-more
エレメントのみにイベント登録をしたい(ページロード時点で存在しているbtn-more
はページロード時点でイベント登録しているので除く)のですが、その方法がわかりません。
何かいい方法があればお伺いしたく質問させていただきました。
また、今の実装コードに何か問題点といいますか、そういうのがあればご指摘いただけると幸いです。
###該当のソースコード
javascript
1window.addEventListener('DOMContentLoaded', function() { 2 3 HTMLElement.prototype.eventElm = function() { 4 return this.addEventListener('click', clickEvent, false); 5 }; 6 7 var clickEvent = function(e) { 8 var target = e.target; 9 e.preventDefault(); 10 $.ajax({ 11 url: target.getAttribute('href'), 12 type: 'get' 13 }) 14 .done(function(html) { 15 $('.ui-container').append(html); 16 setEvents(); 17 }) 18 .fail(function(error) { 19 console.log(error); 20 }); 21 }; 22 23 // この関数でajaxで返却されたデータを含め全ての[btn-more]エレメントにイベントを登録しています 24 // 本当は返却データのみにイベント登録をしたい 25 var setEvents = function() { 26 [].forEach.call(document.querySelectorAll('.btn-more'), function(elm) { 27 elm.eventElm(); 28 }); 29 }; 30 31 document.querySelector('.btn-more').eventElm(); 32 33});
html
1<body> 2 <div class="ui-container"> 3 <div class="more-container"> 4 <p>コンテンツ1</p> 5 <p>コンテンツ2</p> 6 <p>コンテンツ3</p> 7 <p>コンテンツ4</p> 8 <p>コンテンツ5</p> 9 <p class="more-trigger"><a class="btn-more" href="sample_more.html">もっとみる</a></p> 10 </div> 11 </div> 12</body>
html
1<!-- ajaxで返却されるデータ --> 2<!-- sample_more.html --> 3<div class="more-container"> 4 <p>コンテンツ6</p> 5 <p>コンテンツ7</p> 6 <p>コンテンツ8</p> 7 <p>コンテンツ9</p> 8 <p>コンテンツ10</p> 9 <p class="more-trigger"><a class="btn-more" href="sample_more2.html">もっとみる</a></p> 10</div> 11 12<!-- sample_more2.html --> 13<div class="more-container"> 14 <p>コンテンツ11</p> 15 <p>コンテンツ12</p> 16 <p>コンテンツ13</p> 17 <p>コンテンツ14</p> 18 <p>コンテンツ15</p> 19 <p>ここまで</p> 20</div>
###補足情報
プロジェクトの関係上、ajax部分のみライブラリ(jQueryやfetch API)を使っていますが、基本はネイティブなJavaScriptの記述です。
もしいい方法などありましたらお教えいただけると幸いです。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/03 01:31