die()

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

jQuery API の die() は、live( eventType, fn )、live( eventType, eventData, fn )、live( events )でバインドしたイベントハンドラを、全て削除するメソッド。

「jQuery Version 1.7」の時点で非推奨になった。
「jQuery Version 1.9」で廃止された。

記述方法

jQuery( セレクター ) . die();

「セレクター」の要素のイベントから、liveメソッドでバインドしたイベントハンドラを、全て削除。

実装例（サンプル）

  1. リストアイテム

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

  • 「live」のラジオボタンを選択して、リストアイテムをクリックすると、新しいリストアイテムを生成する。新しく生成したリストアイテムをクリックしても、新しいリストアイテムを生成する。リストアイテムにカーソルを合わせると、背景色を黄色に変える。リストアイテムからカーソルを外すと、背景色を白色に戻す。
  • 「die」のラジオボタンを選択すると、リストアイテムをクリックしても、新しいリストアイテムを生成しない。
  • 「bind」のラジオボタンを選択すると、現在あるリストアイテムをクリックすると、新しいリストアイテムを生成するが、新しく生成したリストアイテムをクリックしても、新しいリストアイテムを生成しない。

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

JavaScript

<script>
<!--
jQuery( function() {
    function jqueryApiAfter() {
        jQuery( this ) . after( '<li class="jquery-api-after">リストアイテム</li>' );
    }
    function jqueryApiLiveMouseover() {
        jQuery( this ) . css( 'backgroundColor', 'yellow' );
    }
    function jqueryApiLiveMouseout() {
        jQuery( this ) . css( 'backgroundColor', 'white' );
    }
    jQuery( '#jquery-api-live' ) . click( function () {
        jQuery( '.jquery-api-after' ) . unbind( 'click', jqueryApiAfter );
        jQuery( '.jquery-api-after' ) . die();
        jQuery( '.jquery-api-after' ) . live( {
            click: jqueryApiAfter,
            mouseover: jqueryApiLiveMouseover,
            mouseout: jqueryApiLiveMouseout,
        } );
    } ) . click();
    jQuery( '#jquery-api-die' ) . click( function () {
        jQuery( '.jquery-api-after' ) . unbind( 'click', jqueryApiAfter );
        jQuery( '.jquery-api-after' ) . die();
    } );
    jQuery( '#jquery-api-bind' ) . click( function () {
        jQuery( '.jquery-api-after' ) . die();
        jQuery( '.jquery-api-after' ) . bind( 'click', jqueryApiAfter );
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-radio label {
    margin: 0 10px 0 0;
    font-size: 16px;
    color: black;
    cursor: pointer;
}
#jquery-api-radio input {
    margin: 0;
}
.jquery-api-after {
    cursor: pointer;
}
-->
</style>

HTML

<div id="jquery-api-radio">
    <p>
        <label for="jquery-api-live">
            <input type="radio" id="jquery-api-live" name="jquery-api-radio"> live
        </label>
        <label for="jquery-api-die">
            <input type="radio" id="jquery-api-die" name="jquery-api-radio"> die
        </label>
        <label for="jquery-api-bind">
            <input type="radio" id="jquery-api-bind" name="jquery-api-radio"> bind
        </label>
    </p>
</div>
<ol>
    <li class="jquery-api-after">リストアイテム</li>
</ol>

スポンサード リンク

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