jQueryon() メソッドは、eventsをバインドするための公式に推奨されるメソッドです。
$(selector).on(event,childSelector,data,function,map)
これを拡張した以前の一般的なメソッドがいくつかあります。
bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",function(){ alert("The paragraph was clicked."); });delegate() $("#p1").on("click","p",function(){ $(this).css("background-color","pink"); });
$("#p2").delegate("p","click",function(){ $(this).css("background-color","pink"); });live() $("#p1").on("click",function(){ $(this).css("background-color","pink"); });
$("#p2").live("click",function(){ $(this).css("background-color","pink"); });
上記の 3 つのメソッドは、jQuery 1.8 以降では推奨されません。そのため、公式は 1.9 で live() メソッドの使用を中止することをお勧めします。 on() メソッドを使用します。
ヒント: on() にバインドされたメソッドを削除する必要がある場合は、off() メソッドを使用できます。
$(document).ready(function(){ $("p").on("click",function(){ $(this).css("background-color","pink"); }); $("button").click(function(){ $("p").off("click"); }); });
ヒント: イベントに必要な操作が 1 つだけの場合は、one() メソッドを使用できます
$(document).ready(function(){ $("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });});
trigger() binding
$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){ $("input").select(function(){ $("input").after(" Text marked!"); }); $("button").click(function(){ $("input").trigger("select"); }); });
複数のイベントは同じ関数にバインドされています
$(document).ready(function(){ $("p").on("mouseover mouseout",function(){ $("p").toggleClass("intro"); }); });
複数のイベントが異なる関数をバインドします
$(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 + "! What a beautiful name!").show(); }); $("button").click(function(){ $("p").trigger("myOwnEvent",["Anja"]); }); });
関数にデータを渡します
function handlerName(event) { alert(event.data.msg); } $(document).ready(function(){ $("p").on("click", {msg: "You just clicked me!"}, handlerName) });
$(document).ready(function(){ $("p").on("click","p",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("This is a new paragraph.
").insertAfter("button"); }); });
以上がjQuery on() 関数の使用法を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。