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