unbind( eventType, fn )

投稿日: 2011年8月22日 作成者: alphasis

jQuery API の unbind( eventType, fn ) は、１つ目の引数に指定したイベントから、２つ目の引数に指定したイベントハンドラを、削除することができるメソッド。

記述方法

jQuery( セレクター ) . unbind( イベントタイプ, イベントハンドラ );

「セレクター」の要素の「イベントタイプ」のイベントから、「イベントハンドラ 」を削除。

実装例（サンプル）

　

  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4
  • リストアイテム5

実装例（サンプル）の動作について

  1. 「有効」のラジオボタンを選択し、リストアイテムの上にカーソルを合わせると、背景色が黄色に変化する。リストアイテムの上からカーソルを外すと、背景色が白色に戻る。
  2. 「無効」のラジオボタンを選択すると、「有効」時の変化は何も起きない。

実装例（サンプル）のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    function mouseenterFn() {
        jQuery( this ) . css( 'backgroundColor', 'yellow' );
    }
    function mouseleaveFn() {
        jQuery( this ) . css( 'backgroundColor', 'white' );
    }
    jQuery( '#jquery-api-bind' ) . click( function () {
        jQuery( '#jquery-api-hover li' ) . bind( 'mouseenter', mouseenterFn );
        jQuery( '#jquery-api-hover li' ) . bind( 'mouseleave', mouseleaveFn );
    } ) . click();
    jQuery( '#jquery-api-unbind' ) . click( function () {
        jQuery( '#jquery-api-hover li' ) . unbind( 'mouseenter', mouseenterFn );
        jQuery( '#jquery-api-hover li' ) . unbind( 'mouseleave', mouseleaveFn );
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-radio input {
    margin: 0;
}
#jquery-api-radio label {
    font-size: 16px;
    color: black;
}
#jquery-api-hover li {
    list-style-type: disc;
}
-->
</style>

HTML

<p id="jquery-api-radio">
    <label for="jquery-api-bind">
        <input type="radio" id="jquery-api-bind" name="jquery-api-bind"> 有効
    </label>　
    <label for="jquery-api-unbind">
        <input type="radio" id="jquery-api-unbind" name="jquery-api-bind"> 無効
    </label>
</p>
<ul id="jquery-api-hover">
    <li>リストアイテム1</li>
    <li>リストアイテム2</li>
    <li>リストアイテム3</li>
    <li>リストアイテム4</li>
    <li>リストアイテム5</li>
</ul>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベントハンドラ・アタッチメント パーマリンク