jQueryのon()メソッドの使い方を詳しく解説tips_jquery

jQuery on() メソッドは、イベントをバインドするために公式に推奨されるメソッドです。

コードをコピー コードは次のとおりです:

$(selector).on(event,childSelector,data,function,map)

これを基に拡張された以前の一般的なメソッドがいくつかあります。

コードをコピー コードは次のとおりです:

バインド()

$("p").bind("click",function(){
alert("段落がクリックされました。");
});

$("p").on("click",function(){
alert("段落がクリックされました。");
});

デリゲート()

$("#div1").on("click","p",function(){
$(this).css("background-color","pink");
});

$("#div2").delegate("p","click",function(){
$(this).css("background-color","pink");
});

ライブ()

$("#div1").on("click",function(){
$(this).css("background-color","pink");
});

$("#div2").live("click",function(){
$(this).css("background-color","pink");
});

上記 3 つのメソッドは jQuery 1.8 以降は推奨されません。jQuery 1.9 では live() メソッドの使用が公式によって中止されたため、on() メソッドの使用が推奨されます。

ヒント: on() にバインドされたメソッドを削除する必要がある場合は、off() メソッドを使用できます。

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("p").on("クリック",function(){
$(this).css("background-color","pink");
});
$("ボタン").click(function(){
$("p").off("click");
});
});

ヒント: イベントに必要な操作が 1 つだけの場合は、one() メソッドを使用できます

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("p").one("クリック",function(){
$(this).animate({fontSize:" =6px"});
});
});

trigger() バインディング

コードをコピーします コードは次のとおりです:

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
$("input").select(function(){
$("input").after("テキストマーク付き!");
});
$("ボタン").click(function(){
$("input").trigger("select");
});
});

同じ関数にバインドされた複数のイベント

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("p").on("マウスオーバー マウスアウト",function(){
$("p").toggleClass("イントロ");
});
});

異なる関数にバインドされた複数のイベント

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("p").on({
Mouseover:function(){$("body").css("background-color","lightgray");},
Mouseout:function(){$("body").css("background-color","lightblue");},
Click:function(){$("body").css("background-color"," yellow");}
});
});

カスタム イベントをバインド

コードをコピー コードは次のとおりです:

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! なんて美しい名前でしょう!").show();
});
$("ボタン").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

関数にデータを渡す

コードをコピーします コードは次のとおりです:

関数ハンドラー名(イベント)
{
アラート(event.data.msg);
}

$(document).ready(function(){
$("p").on("click", {msg: "今クリックしました!"}, handlerName)
});

未作成の要素に適用されます

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("div").on("クリック","p",function(){
$(this).slideToggle();
});
$("ボタン").click(function(){
$("

これは新しい段落です。

").insertAfter("button");
});
});