Detaillierte Erläuterung der jQuery on()-Methodenverwendungstipps_jquery

Die jQuery on()-Methode ist eine offiziell empfohlene Methode zum Binden von Ereignissen.

Code kopieren Der Code lautet wie folgt:

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

Mehrere bisher gängige Methoden, die daraus erweitert wurden, umfassen.

Code kopieren Der Code lautet wie folgt:

bind()

　$("p").bind("click",function(){
Alert("Der Absatz wurde angeklickt.");
});

　$("p").on("click",function(){
Alert("Der Absatz wurde angeklickt.");
});

delegate()

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

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

live()

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

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

Die oben genannten drei Methoden werden nach jQuery 1.8 nicht mehr empfohlen. Der Beamte hat die Verwendung der live()-Methode in jQuery 1.9 eingestellt, daher wird empfohlen, die on()-Methode zu verwenden.

Tipp: Wenn Sie die an on() gebundene Methode entfernen müssen, können Sie die Methode off() verwenden.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
​$("p").on("click",function(){
　　$(this).css("background-color","pink");
});
​$("button").click(function(){
　　$("p").off("click");
});
});

Tipp: Wenn Ihr Event nur einen Vorgang erfordert, können Sie die one()-Methode
verwenden

Code kopieren Der Code lautet wie folgt:

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

trigger()-Bindung

Code kopieren Der Code lautet wie folgt:

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
​$("input").select(function(){
　　$("input").after("Text markiert!");
});
​$("button").click(function(){
　　$("input").trigger("select");
});
});

Mehrere Ereignisse, die an dieselbe Funktion gebunden sind

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});

Mehrere Ereignisse, die an unterschiedliche Funktionen gebunden sind

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
Klicken Sie auf:function(){$("body").css("background-color","yellow");}
});
});

Benutzerdefinierte Ereignisse binden

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! Was für ein wunderschöner Name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

Daten an Funktion übergeben

Code kopieren Der Code lautet wie folgt:

Funktion handlerName(event)
{
alarm(event.data.msg);
}

$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

Gilt für nicht erstellte Elemente

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("

Dies ist ein neuer Absatz.

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