Explication détaillée de l'utilisation de la méthode jQuery on() tips_jquery

La méthode jQuery on() est une méthode officiellement recommandée pour lier des événements.

Copier le code Le code est le suivant :

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

Plusieurs méthodes auparavant courantes développées à partir de cela incluent.

Copier le code Le code est le suivant :

lier()

　$("p").bind("click",function(){
alert("Le paragraphe a été cliqué.");
});

　$("p").on("clic",function(){
alert("Le paragraphe a été cliqué.");
});

délégué()

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

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

en direct()

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

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

Les trois méthodes ci-dessus ne sont pas recommandées après jQuery 1.8. Le responsable a annulé l'utilisation de la méthode live() dans jQuery 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().

Copier le code Le code est le suivant :

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

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

Copier le code Le code est le suivant :

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

liaison trigger()

Copier le code Le code est le suivant :

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
​$("entrée").select(function(){
　　$("input").after("Texte marqué!");
});
​$("bouton").click(function(){
　　$("input").trigger("select");
});
});

Plusieurs événements liés à la même fonction

Copier le code Le code est le suivant :

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

Plusieurs événements liés à différentes fonctions

Copier le code Le code est le suivant :

$(document).ready(function(){
$("p").on({
survol de la souris:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
Cliquez:function(){$("body").css("background-color","jaune");}
});
});

Lier des événements personnalisés

Copier le code Le code est le suivant :

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! Quel beau nom!").show();
});
$("bouton").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

Transmettre les données à la fonction

Copier le code Le code est le suivant :

gestionnaire de fonctionNom(événement)
{
alerte(event.data.msg);
>

$(document).ready(function(){
$("p").on("click", {msg : "Vous venez de cliquer sur moi !"}, handlerName)
});

S'applique aux éléments non créés

Copier le code Le code est le suivant :

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

Ceci est un nouveau paragraphe.

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