offメソッド
off メソッドは、要素からイベントハンドラのバインドを解除することを可能にします。ハンドラをバインドするには、off メソッドを利用できます。
構文
要素からイベントハンドラを削除するには、第一パラメータとして文字列で、スペースで区切られた1つまたは複数のイベントを渡します。第二パラメータとして、要素内の子孫をフィルタリングする追加のセレクタを渡します(これは、ハンドラをアタッチしたときに on メソッドに渡したものと一致する必要があります)。すべての委譲されたイベントを削除するには、値 '**' を渡します。第二パラメータは省略可能です。第三パラメータとして、(アタッチした)ハンドラ関数を渡します。この関数にはイベントオブジェクトが渡されます。または false を渡すこともできます:
$(selector).off(events, [selector], handler(eventObject));
off メソッドを別の方法で使用することもできます。その場合、第一パラメータとしてJavaScriptオブジェクトを渡します。このオブジェクトのキーはイベントタイプ、値は要素に追加したハンドラ関数です:
$(selector).off({'eventType': handler}, [selector]);
単に一つのパラメータとして jQuery.Event オブジェクトを渡すこともできます:
$(selector).off(event);
メソッドにパラメータを渡さない場合、要素からアタッチされたすべてのハンドラのバインドが解除されます:
$(selector).off();
例
段落にハンドラ関数 testFunc を追加しましょう。しかし、同時に2番目の段落からハンドラを削除します。したがって、2番目の段落をクリックしても何も起こりません(コードの最後の行をコメントアウトすると、イベントが発生し、2番目の段落をクリックしたときに動作することがわかります):
<p id="test1">click1</p>
<p id="test2">click2</p>
function testFunc(event) {
alert(event.data.text);
}
$('#test1').on('click', {text: 'aaa'}, testFunc); // ハンドラを追加
$('#test2').on('click', {text: 'bbb'}, testFunc); // ハンドラを追加
$('#test2').off('click', testFunc); // ハンドラを削除