「動的に追加した要素にイベント」の処理の違いについて

###jQueryのonハンドラについて
jQueryのajax(post)にてappendした要素へのイベントの設定と
ajaxではなくappendした要素へのイベント設定の動作の違いがわかりません。
同じことをしているのですが・・・どうなっているのでしょうか？

ajaxで追加した要素にもイベントを設定したいです。
よろしくおねがいいたします。

###HTML

<html>
<head></head>
<body>
<div class="container-fluid">
  <div class="result"></div>
</div>
</body>
</html>

コード

###jQuery(※挿入する要素が複雑ですいません)

$(document).ready(function() {
		//こちらはコンソールが出力されます。
		$('.result').append('<div class="card-block card-res"><i class="fa fa-thumbs-o-up fa-1x" aria-hidden="true"></i><label class="small likes" posts_id="9" id="likes">イイネ</label><span class="small likes_num">23</span><i class="fa fa-thumbs-o-down fa-1x" aria-hidden="true"></i><label class="small likes" posts_id="9" id="unlikes">イマイチ</label><span class="small unlikes_num">12</span><div class="float-xs-right"><button type="button" class="btn btn-primary btn-sm sbm_res" posts_id="9">投稿</button></div><textarea class="form-control flex-row" id="text_res" name="text_res" rows="2" placeholder="返信する"></textarea></div>');

		//こちらはコンソールが出力ません。
		$.ajax({
				type: "POST",
				url: "./php/ajax/test.php",
				success: function(data){
					$('.result').append(data);
				}
			});
		
		$('.card-res').on('click','.likes', function(){
			console.log('1');
		})
  
    });

###PHP(./php/ajax/test.php)

echo '<div class="card-block card-res"><i class="fa fa-thumbs-o-up fa-1x" aria-hidden="true"></i><label class="small likes" posts_id="9" id="likes">イイネ</label><span class="small likes_num">23</span><i class="fa fa-thumbs-o-down fa-1x" aria-hidden="true"></i><label class="small likes" posts_id="9" id="unlikes">イマイチ</label><span class="small unlikes_num">12</span><div class="float-xs-right"><button type="button" class="btn btn-primary btn-sm sbm_res" posts_id="9">投稿</button></div><textarea class="form-control flex-row" id="text_res" name="text_res" rows="2" placeholder="返信する"></textarea></div>';

###補足情報(言語/FW/ツール等のバージョンなど)
centOS7
php7
jQuery3.1
bootstrap4

を使用しています。

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

回答1件

ベストアンサー

イベントを追加するときに無い要素にはイベントは付きません。なので下記のように「Ajax前からある要素」にイベントをつけてはいかがでしょうか。

JavaScript
1$('.result').on('click','.likes', function(){});

投稿2017/07/21 08:08

kei344

総合スコア69407

bicycle8080

2017/07/21 08:19

ありがとうございます。それも試してみたのですが、ずっとできないで悩んでました。しかし、今「jQueryプラグインjscroll」を切ると、動きました。こいつが、悪さをしているようです。無限スクロールを自分で組む必要がありそうです汗ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

「動的に追加した要素にイベント」の処理の違いについて

関連した質問