jQuery イベントデリゲートのサンプル(on) |

jQueryのイベントデリゲートのサンプルです。
onメソッドを使用します。

onメソッドを使用したイベントデリゲート

if $(親セレクタ).on (イベント名 , 子セレクタ,function(e){
イベントが発生した時の処理
}

イベントデリゲートは、イベントバブリングの仕組みを利用しています。
イベントバブリングとは、子要素で発生したイベント(例：clickイベント)が親要素に伝播して親要素のイベント(clickイベント)が発生することです。
参照:JavaScript イベントのバブリングとキャンセルのサンプル(stopPropagation)
上記の構文は、親セレクタ配下の子セレクタで指定のイベントが発生した時に処理(イベントリスナ)を行います。
イベントリスナは、イベントが発生した子要素ではなく、親要素で管理されます。
→仮に子要素が動的に追加される場合でもその子要素にイベントリスナを設定できます。
親要素に対して1つイベントリスナを登録します。
→子要素１つずつに設定するよりメモリやパフォーマンスを改善します。
event delegate = (親要素に)イベント処理を委譲する

onメソッドを使用したイベントデリゲートのサンプル

「追加」をクリックすると、「☓回目の追加」という文言が動的に追加されていきます。
新規に追加された「☓回目の追加」という文字をクリックしても文言が動的に追加されてます。(最大5回まで)

追加

コード

上記サンプルのコードです。
5行目は、セレクタで25行目を指しています。
6行目はclickイベントを指定しています。
7行目は、セレクタはで26行目を指しています。
8行目は、イベントが発生した時に実行される処理です。(イベントリスナ)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var r = 1;
	$('#d1').on( //親セレクタ
		'click', //イベント
		'.p1',  //子セレクタ
		function() {
			if(r <6 ){
				$('<p class="p1">' + r + '回目の追加</p>')
					.appendTo('#d1');
				r = r + 1;
			}
		}
	);
	$("#btn1").click(function() {
			if(r !=1 ){
				r = 1;
				$("#d1").empty();
				$("#d1").append('<p class="p1">追加</p>');
			}
	});
});
</script>
<div id="d1">
	<p class="p1">追加</p>
</div>
<input type="button" id="btn1" value="クリア">