Grundlegendes zur Verwendung der jQuery on()-Funktion

Die

jQuery on()-Methode ist eine offiziell empfohlene Methode zum Binden des -Ereignisses .

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

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

<span style="font-family: verdana, geneva; font-size: 14px;"><strong>bind()</strong>　　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

　　<span style="color: #ff0000;">$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});</span><strong>delegate()</strong>　　<span style="color: #ff0000;">$("#p1").on("click","p",function(){
　　　　$(this).css("<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>","pink");
　　});<br></span>　　$("#p2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});<strong>live()</strong>　　<span style="color: #ff0000;">$("#p1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});</span><br>　　$("#p2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});<br></span>

Die oben genannten drei Methoden sind in jQuery1 enthalten. Es wird nicht empfohlen um es nach .8 zu verwenden. Der Beamte hat die Verwendung der live()-Methode in 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.

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

Tipp: Wenn Ihre Veranstaltung nur eine Operation erfordert, können Sie die one()-Methode

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

trigger() bindet

$(selector).trigger(event,eventObj,param1,param2,...)

$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");　　});
});

Mehrere Ereignisse binden dieselbe Funktion

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

Mehrere Ereignisse an verschiedene Funktionen binden

$(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");}  
  });
});

Benutzerdefinierte Ereignisse binden

$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});

Die Übergabe von Daten an die Funktion

function handlerName(event) 
{
  alert(event.data.msg);
}

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

funktioniert für nicht erstellte Elemente

Das obige ist der detaillierte Inhalt vonGrundlegendes zur Verwendung der jQuery on()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!