Q&A
前提・実現したいこと
jQueryのonメソッドで、下記2つの違いについてご教示お願い致します。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>sample page</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 7<script src="sample01.js"></script> 8<link id="link1" rel="stylesheet" href="sample.css"> 9</head> 10<body> 11 <button class="change">変更</button> 12 <div id="myid" class="sample">テスト</div> 13</body> 14</html> 15
下記、コメントで実行した場合と、コメントじゃない方とで実行した場合とで、
今回のコードでは結果に違いが無かったのですが、
一般的にこの2つのonメソッドの書き方の違いは何ですか？
使い分けやどちらの書き方の方が推奨などありましたらご教示お願い致します。
また、コメントの方の書き方がよくわかってないのですが、
「documentの.changeをclickしたら関数を実行」というコードなのでしょうか？
・sample01.js
jQuery
1$(function() { 2 //$(document).on("click", ".change", function(e) { 3 $(".change").on("click", function(e) { 4 $('#myid').removeClass('sample'); 5 $('#myid').addClass('sample2'); 6 }); 7});
・sample.css
css
1.sample{ 2 color: blue; 3} 4 5.sample2{ 6 color:red; 7}
回答1件
0
ベストアンサー
$(document).on("click", ".change", ()=>{} ) は
そのコードを実行した時点にHTML上に無い、追加した .change 要素のクリックにも反応します。
【jQuery： 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには？（on） - Build Insider】
https://www.buildinsider.net/web/jqueryref/017
【イベントデリゲートで理解するjQueryのonメソッド - to-R】
http://blog.webcreativepark.net/2013/12/01-215447.html
【jQuery の.on()をもういっぺん理解してみる - あまり新しくないもの】
http://rtshaaaa.hateblo.jp/entry/2013/12/03/102836
投稿2018/08/31 17:07
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/02 03:52 編集
2018/09/02 04:03
2018/09/02 04:14