jQuery API の off() は、マッチした要素の全てのイベントハンドラを取り除くメソッド。
記述方法
jQuery( セレクター ) . off();
「セレクター」にマッチした要素の全てのイベントハンドラを取り除く。
実装例（サンプル）
- このリストに追加
実装例（サンプル）の動作について
- 「項目追加（有効）」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。
- 「イベントハンドラを追加」ボタンをクリックする度に、項目を追加するイベントハンドラを「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントに追加する。
- 「イベントハンドラを取り除く」ボタンをクリックすると、「項目追加（有効）」ボタンの全てのイベントハンドラを取り除き、ボタン名を「項目追加（無効）」に変更する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var count = 1;
jQuery( "#sample-bind" ).on( "click", function() {
jQuery( "#sample-button" ).on(
{
click: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。クリックで追加。</li>" );
},
mouseover: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーで追加。</li>" );
},
mouseout: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトで追加。</li>" );
}
}
).text( "項目追加（有効）" );
} ).click();
jQuery( "#sample-unbind" ).on( "click", function() {
jQuery( "#sample-button" ).off().text( "項目追加（無効）" );
} );
} );
// -->
</script>
<!--
jQuery( function() {
var count = 1;
jQuery( "#sample-bind" ).on( "click", function() {
jQuery( "#sample-button" ).on(
{
click: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。クリックで追加。</li>" );
},
mouseover: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーで追加。</li>" );
},
mouseout: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトで追加。</li>" );
}
}
).text( "項目追加（有効）" );
} ).click();
jQuery( "#sample-unbind" ).on( "click", function() {
jQuery( "#sample-button" ).off().text( "項目追加（無効）" );
} );
} );
// -->
</script>
HTML
<button id="sample-button">項目追加（有効）</button>
<button id="sample-bind">イベントハンドラを追加</button>
<button id="sample-unbind">イベントハンドラを取り除く</button>
<ol id="sample-ol">
<li>このリストに追加</li>
</ol>
<button id="sample-bind">イベントハンドラを追加</button>
<button id="sample-unbind">イベントハンドラを取り除く</button>
<ol id="sample-ol">
<li>このリストに追加</li>
</ol>