Comprendre l'utilisation de la fonction jQuery on()

La méthode

jQuery on() est une méthode officiellement recommandée pour lier l'événement .

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

Plusieurs méthodes précédemment courantes développées à partir de cela incluent.

<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>

Les trois méthodes ci-dessus sont dans jQuery1 Ce n'est pas recommandé pour l'utiliser après .8. Le responsable a annulé l'utilisation de la méthode live() dans la version 1.9, il est donc recommandé d'utiliser la méthode on().

astuce : Si vous devez supprimer la méthode liée à on(), vous pouvez utiliser la méthode off().

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

astuce : Si votre événement ne nécessite qu'une seule opération, vous pouvez utiliser la méthode one()

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

trigger() lie

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

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

Plusieurs événements lient la même fonction

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

Lier plusieurs événements à différentes fonctions

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

Lier des événements personnalisés

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

La transmission de données à la fonction

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

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

fonctionne pour l'élément non créé

$(document).ready(function(){
  $("p").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!