動的に生成した要素にイベントを設定する

動的に生成したDOM要素にイベントを設定する方法をメモ。

サンプルコード

.list__itemをクリックするとconsoleにindexを返す処理と、#addをクリックで.list__itemを追加する処理を実装します。

HTML

<ul class="list">
	<li class="list__item">リスト</li>
	<li class="list__item">リスト</li>
	<li class="list__item">リスト</li>
	<li class="list__item">リスト</li>
	<li class="list__item">リスト</li>
</ul>
<button id="add">リストの追加</button>

JavaScript

$(function() {
	$('.list__item').on('click', function() {
		console.log($(this).index());
	});
	$('#add').on('click', function() {
		var insert = '';
		for (var i = 0; i < 5; i++) {
			insert += '<li class="list__item">リスト</li>';
		}
		$('.list').append(insert);
	});
});

この場合、追加した.list__itemをクリックしてもconsoleは表示されません。
対応前のデモページ
　

.list__itemを追加した後に、.list__itemに再度 $(‘.list__item’).on(‘click’, fn); でイベントを追加してみます。

JavaScript

$(function() {
	$('.list__item').on('click', function() {
		console.log($(this).index());
	});
	$('#add').on('click', function() {
		var insert = '';
		for (var i = 0; i < 5; i++) {
			insert += '<li class="list__item">リスト</li>';
		}
		$('.list').append(insert);

		$('.list__item').on('click', function() {
			console.log($(this).index());
		});
	});
});

追加した.list__itemでconsoleが出るようになりましたが、それ以外でconsoleが余分に出るようになりました。
うまくいかない場合のデモページ
　

$(document).on(‘click’, ‘.list__item’, fn); でイベントを追加するようにしてみます。

JavaScript

$(function() {
	$(document).on('click', '.list__item', function() {
		console.log($(this).index());
	});
	$('#add').on('click', function() {
		var insert = '';
		for (var i = 0; i < 5; i++) {
			insert += '<li class="list__item">リスト</li>';
		}
		$('.list').append(insert);
	});
});

追加した.list__itemだけに新しくイベントが追加されました。
対応後のデモページ
　

off()を使っていったんイベントを解除して、再度イベント追加する方法でも対応できます。

JavaScript

$(function() {
	$('.list__item').on('click.test', function() {
		console.log($(this).index());
	});
	$('#add').on('click', function() {
		$('.list__item').off('click.test');

		var insert = '';
		for (var i = 0; i < 5; i++) {
			insert += '<li class="list__item">リスト</li>';
		}
		$('.list').append(insert);

		$('.list__item').on('click.test', function() {
			console.log($(this).index());
		});
	});
});

対応後のデモページ2