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){
});
イベントハンドラ内で、イベントによる分岐を行いたい場合は、次のように記述します。
$("p").live("click dblclick", function(event){
if(event.type == "click") {
} else {
}
});
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 |
イベント実行時に渡されたデータ。 |
戻り値
関連
例
例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");
});
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;
}
|