質問編集履歴

1 sample_more2.htmlないのコンテンツナンバーが重複していたので修正しました。

souta-haruran

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>コンテンツ6</p>
 <p>コンテンツ7</p>
 <p>コンテンツ8</p>
 <p>コンテンツ9</p>
 <p>コンテンツ10</p>
 <p>コンテンツ11</p>
 <p>コンテンツ12</p>
 <p>コンテンツ13</p>
 <p>コンテンツ14</p>
 <p>コンテンツ15</p>
 <p>ここまで</p>
</div>
```
###補足情報
プロジェクトの関係上、ajax部分のみライブラリ(jQueryやfetch API)を使っていますが、基本はネイティブなJavaScriptの記述です。
もしいい方法などありましたらお教えいただけると幸いです。
よろしくお願いします。
  • JavaScript

    23939 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1521 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る