ajaxの返り値にイベントを登録したい

###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件

JavaScript
1$( function() {
2	$( 'body' ).on( 'click', '.btn-more', function( e ) {
3		e.preventDefault();
4		$.ajax( {
5			url: $( this ).attr( 'href' ),
6			type: 'get'
7		} )
8		.done( function( html ) {
9			$( '.ui-container' ).append( html );
10		} )
11		.fail( function( error ) {
12			console.log( error );
13		} );
14	} );
15} );

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1#toc-2

【【jQuery】onメソッドの使用方法】
https://qiita.com/katsunory/items/7b50d399329767a893e1#selectorでイベントデリゲート

上記を書き直すなら↓。

【jQueryを使わずjavascriptだけで書き直した際の記法メモ】
https://qiita.com/moriyaman/items/3b3f7878f8ecc2b76372#liveon-event

投稿2018/06/02 17:03

kei344

総合スコア69398

souta-haruran

2018/06/03 01:31

ご回答ありがとうございます。お教えいただいた方法で試していきたいと思います。

行動規範の内容に同意します

ベストアンサー

clickEvent中でajaxで取得したhtmlをjqueryオブジェクトに変換し、そのオブジェクトからfind('.btn-more')すると、いま取得したボタンのみ選択することができます。

javascript
1  var clickEvent = function(e) {
2    var target = e.target;
3    e.preventDefault();
4    $.ajax({
5      url: target.getAttribute('href'),
6      type: 'get'
7    })
8    .done(function(html) {
9      var jqueryObj = $(html);
10      jqueryObj.find('.btn-more').each(function(i, elm) {
11        elm.eventElm();
12      });
13      $('.ui-container').append(jqueryObj);
14    })
15    .fail(function(error) {
16      console.log(error);
17    });
18  };