J'ai un code qui lie le clic d'action sur la page de la page, c'est un lien. Lorsque je clique sur elle, il envoie une demande AJAX et remplace le contenu de certains DIV avec la fonction jQuery append (). Ce nouveau contenu a des liens et j'ai besoin de lier une certaine action pour eux, mais je ne pourrais pas .. ne pouviez pas travailler, je pense, car JQuery ANNEND ne met pas à jour l'arbre DOM. Comment puis-je obtenir une contraction tardive?
7 Réponses :
Vous devez utiliser JQuery's Live fonction, qui va lier un événement à tous les éléments correspondant à un sélecteur, peu importe quand ils ont été créés.
La reliure tardive est maintenant disponible en utilisant l'événement Live () de JQuery ():
$('a.my-links-class').live('click', function() {
// do your link action here
});
Cela vient de faire ma journée. Live () est incroyable!
Vous devriez utiliser on () au lieu de live () .
Vous pouvez utiliser jQuery 1.3 + 's Une autre option serait d'avoir une fonction pour lier les éléments donnés à un certain contexte (à l'aide du deuxième paramètre de la fonction rarement utilisé par la fonction de sélecteur $): p> et appelez cela quand vous Mettez à jour un élément avec Ajax: P> $ (). Live (événement, fonction) code> fonction. $ ("a"). Live ("clic", myClickfuncunc) code> va lier myClickfunc code> comme $ ("A"). Cliquez sur (myClickfuncunc) code> ou $ ("a"). Bind ("cliquez sur", myClickfuncunc) code>, mais les événements seront liés "Live", des éléments ajoutés à la DOM après cette fonction être lié.
Vous pouvez supprimer des événements live-liés avec $ (). Die () code>.
Pour plus d'informations sur $ (). En direct, voir La documentation pour cela . $("<div>").load("...", "...", function(){myBindEvents(this);});
L'événement Pour toute personne utilisant une version ultérieure de JQuery, ils peuvent utiliser l'événement .on () , cela fonctionne à peu près de la même manière.
Il y a 3 fonctions qui peuvent faire ceci:
$ (sélecteur) .Live (événements, données, gestionnaire); code> - jQuery 1.3+ - version obsolète: 1.7, supprimé: 1.9 em> ( Référence ) LI>
-
$ (document) .Delegate (sélecteur, événements, données, gestionnaire); code> - jQuery 1.4.3+ - comme de jQuery 1.7, .Delegate () a été remplacée par le .on () méthode. em> ( Référence ) li>
-
$ (document) .on (événements, sélecteur, données, gestionnaire); code> - jQuery 1.7+ - préféré ( référence ) li>
ul> C'est généralement conseillé à utiliser sur () code> strong> et il est utilisé est simple et probablement préféré. p>
- Le premier sélecteur doit exister lors de l'appelant la fonction et peut ne pas être supprimé ou l'événement sera parti également (cela peut être
Document Code>). Li>
- Le premier paramètre est l'événement (par exemple "Cliquez sur") Li>
- Le deuxième paramètre est le sélecteur dont vous souhaitez lier l'événement. LI>
- Ensuite, vous pouvez également ajouter des données personnalisées et une fonction à l'événement. LI>
ol>
Voici quelques échantillons de code: P>
// Make sure the DOM is ready
$(function() {
// Bind the click event to the function
$(document).on("click", "a.class", function(event) {
// Put your code here.
});
});
Brillant! Je me demande pourquoi cela ne fonctionne pas: $ (fonction (fonction () {$ ("classe"). On ("Cliquez sur", "A", Fonction (événement) {// Mettez votre code ici.});});});} );
Vous recherchez un élément A à l'intérieur d'un autre élément avec la classe classe ?
Oui ... je pensais $ ('. CLASS1') Sélectionnera tous les éléments avec une classe de Classe1 , le "A" L'ancre étiquette l'étiquette et lie le gestionnaire d'événements. Non?
Méthode .Live code> dans jQuery 1.9 code> est désavigé.so maintenant tu peux faire comme ça: $("body").on("click", ".classname", function() { ... })
Dans mon cas, j'utilise une bibliothèque JS dans laquelle j'ai une variable d'élément et que le code était comme mais cela ne fonctionne pas avec mon élément de liaison tardif.
Donc, j'utilise enfin l'événement Core JS Cliquez sur P> element.addEventListener('click', function() {
//My some action
}, false);