live(eventType, [eventData], handler)


version 1.3 以降

解説

指定されたイベントに、イベントハンドラをバインドします。
セレクタにマッチする要素であれば、後から生成された要素に対しても動的にイベントハンドラをバインドします。

live() でバインドしたイベントハンドラを削除するには、die(eventType, [handler]) を呼び出します。

イベントの振る舞いの制御

イベントハンドラがfalseを返すと、イベントバブリング、及び、イベントに定義されている標準アクションが停止されます。 イベントバブリングのみを停止するには、イベントハンドラに渡されるイベントオブジェクトstopPropagation()を呼び出してください。 また、標準アクションのみを停止するには、preventDefault()を呼び出してください。

バインド時にデータを渡す

バインド時にイベントハンドラにデータを渡すには、第2引数にデータを指定します。その場合、イベントハンドラは第3引数に指定します。 データは、イベントハンドラに渡されるイベントオブジェクトdataプロパティで参照することができます。

イベント実行時にデータを渡す

イベント実行時に渡されたデータは、イベントハンドラの第2仮引数以降に展開されます。

引数

  • eventType
    String: バインドするイベントを表す文字列。

    カスタムイベント (version 1.4 から)
    ユーザ定義のカスタムイベントをバインドすることができます。

    イベントの複数指定 (version 1.4 から)
    eventType に、イベントをスペースで区切りで指定することによって、複数のイベントに同じイベントハンドラを一度に指定することができます。
    $("p").live("click dblclick", function(event){
        // click イベントと、dblclick イベントに同じイベントハンドラを設定
    });
    

    イベントハンドラ内で、イベントによる分岐を行いたい場合は、次のように記述します。
    $("p").live("click dblclick", function(event){
        if(event.type == "click") {
            // click 時の処理定
        } else {
            // dblclick 時の処理定
        }
    });
    

    focus / blurの自動マッピング (version 1.4.1 から)
    focus / blurイベントは、jQuery内部で自動的focusin / focusoutにマッピングされます。

    hoverの自動マッピング (version 1.4.1 から)
    hoverイベントは、jQuery内部で自動的mouseenter, mouseleaveにマッピングされます。

  • [eventData]オプション (version 1.4 から)
    Object: イベントハンドラに渡すデータ。イベントオブジェクトdataプロパティで参照。
  • handler
    Function: バインドするイベントハンドラ関数。この関数には2つの引数が渡されます。
    引数 説明
    event イベントオブジェクト。バインド時に渡されたデータは、dataプロパティで参照。
    triggerData イベント実行時に渡されたデータ。

戻り値

  • jQuery: jQueryオブジェクト

関連


例1:「live」ボタンをクリックすると、同じセレクタでマッチする要素を追加するイベントハンドラをバインドします。 後から生成された要素もセレクタにマッチするため、同じイベントハンドラがバインドされます。
(「段落」をクリックすると、要素を追加します。)

「die」ボタンをクリックすると、後から生成された要素も含め、live メソッドで登録されたイベントハンドラをアンバインドします。

var liveClickHandler = function() {
    $(this).after("<p class='live'>段落</p>");
}

$("#live").click(function(){
    $("p.live")
        .live("click", liveClickHandler)
        .css("backgroundColor", "#dcffdc");
});

$("#die").click(function(){
    $("p.live")
        .die("click", liveClickHandler)
        .css("backgroundColor", "#fcfcfc");
});


例1


段落


focus / blurイベントの自動マッピング (version 1.4.1 から)

focus / blurイベントは、jQuery内部で自動的にfocusin / focusoutにマッピングされます。

jquery-1.4.2.js (Development)
var liveMap = {
    focus: "focusin",
    blur: "focusout",
    mouseenter: "mouseover",
    mouseleave: "mouseout"
};

if ( type === "focus" || type === "blur" ) {
    types.push( liveMap[ type ] + namespaces );
    type = type + namespaces;

} else {
    type = (liveMap[ type ] || type) + namespaces;
}

hoverイベントの自動マッピング (version 1.4.1 から)

hoverイベントは、jQuery内部で自動的にmouseenter, mouseleaveにマッピングされます。

jquery-1.4.2.js (Development)
if ( type === "hover" ) {
    types.push( "mouseenter" + namespaces, "mouseleave" + namespaces );
    continue;
}