【jquery】.click()と.on()の違い

.click()と.on()の違い

使用するHTMLコード

<div class="btn">これはボタン</div>

基本使い方は一緒

$('button').click(function() {
    alert('ボタンがクリックされたよー');
});

$('button').on('click', function() {
    alert('ボタンがクリックされたよー');
});

jqueryで静的に追加したボタンでもどっちも挙動は一緒

jQuery(function($){
	$('.btn').after('<div class="add">追加されたボタン</div>')
	$('.add').click(function() {
	    alert('ボタンがクリックされたよー');
	});

	$('.add').on('click', function() {
	    alert('ボタンがクリックされたよー');
	});
});

動的な要素に対してクリックイベントを仕込むときは注意

クリックして追加される要素に対してさらにクリックイベントを仕込むときは注意が必要

jQuery(function($){
	$('.btn').click(function() {
		$(this).after('<div class="add">追加されたボタン</div>')
	});
	// ×　動かない
	$('.add').click(function() {
	    alert('ボタンがクリックされたよー');
	});
	// ○　動くけど書き換えが必要
	$('body').on('click' ,'.add', function() {
	    alert('ボタンがクリックされたよー');
	});
});

$('body').on('click' ,'.add', function()って書き換えてるけど
最初のDOM読み込み時に無い要素なので、クリックされたらbody要素の内の.addを見に行ってねって命令出してるみたい

こういう風に動的に何かを追加する必要があれば.on()を使ったほうがよさげ

jQueryのclick()で処理を実行&無効にする方法

【jQuery入門】on()によるイベント処理の使い方まとめ！