clickイベントが効かない？appendで後から追加した要素にクリックイベントを追加する方法

jQueryを使用していると.click()で手軽にクリックイベントを設定することができますが、.append()などで後から追加したDOM要素に.click()を指定しても反応しないので、その対処法を今回ご紹介します。

コード

変更前

$('.js-clickBtn').click(function(){
		  $('.demo_wrap').append('<div class="demo_click_item">Click Me</div>');
	  });
	  $('.demo_click_item').click(function(){
		  alert('clicked');
	  });

変更後

$('.js-clickAfBtn').on('click',function(){
		$('.demo_af_wrap').append('<div class="demo_af_click_item">Click Me</div>');
	});
	$('.demo_af_wrap').on('click','.demo_af_click_item',function(){
		alert('clicked');
	});

冒頭で説明した通り、jQueryで要素を指定するときに、$('.demo_click_item').click()と指定していると、後から追加された.demo_click_itemにはクリックイベントを追加されません。（対策前がそのコードです）

対策後では何が違うかというと、まず.click()ではなく.on()を使用しています。どちらも同じクリックイベントを追加するコードですがonの方がclickより汎用性が高く使いやすいので.click()を使用している人は.on()を使用するようにしましょう。（jQuery ver 1.7から使用可能、clickとonの違いについては別記事で紹介します）

そして、対策後のコードを見ていただければわかると思いますが、$('.demo_wrap').on('click','.demo_af_click_item',function(){});という記述になっています。

これは、.demo_wrap要素（親要素）に対してイベントを設定することで間接的に.demo_af_click_item(子要素)にイベントを設定しています。.demo_wrapは最初からある要素なので、そこにイベントを追加することであとから追加した要素に対してもイベントが発生するようになっています。ですので.demo_wrapは最初からある要素でなければなりません。

まとめ

後から追加する要素に対してクリックイベントを設定する場合は、そのクリックする要素の親要素に対して.on()でイベントを設定しましょう。また、その他の場合でも.click()ではなく.on()を使うようにしていきましょう。

では。