メモ。

「.off()」関数を用いる。

以下のようなHTMLがあったとする。

<div class="append">
<button id="btn" type="button">Click</button>
<button id="off" type="button">Off Event</button>
</div>

スクリプトは以下の通り。

<script>
$(function(){
	// 既存、追加問わず全ての#btnに対してイベントがバインドされる
	$(document).on('click', '#btn', function(){
		$('.append').append('<button id="btn" type="button">Appended</button>')
	});
	$('#off').click(function(){
		// #btnにバインドされたイベントが全て解除される
		$(document).off('click', '#btn');
	})
})
</script>

Clickボタンを押すとボタンが追加される。追加されたボタンに関してもメソッドがバインドされているため、クリックすれば更にボタンが追加される。
ここでOff Eventボタンをクリックすると、上記コードの9行目でボタンにバインドされている関数が全て解除され、クリックしても反応しなくなる。

リアルタイムで関数の紐付けを操作したい時にとても便利。