Archive pour avril 2010
jQuery : live vs delegate
Posté par Jimmy dans Laboratoire le 27 avril 2010
jQuery est maintenant à la version 1.4.2. Il y a eu plusieurs bonnes améliorations en rapport avec la version 1.3.X. En autre la nouvelle méthode delegate
dont la définition est :
Attache une fonction à un ou plusieurs événements pour tous les éléments qui répondent au sélecteur, immédiatement et dans le futur basé sur les spécification de l’élément racine.
Par contre voici la définition de la méthode live
: Attache une fonction à un événement pour tous les éléments qui répondent au sélecteur, immédiatement et dans le futur.
Donc quelle est la différence entre live
et delegate
?
La méthode live
existe depuis la version 1.3 et est très utile lorsqu’il y a du html dynamique. Par exemple:
$(".monLien").live("click", function(){alert("allo");});
Ce qui veut dire : Lorsqu’il y a un clique sur un élément ayant la classe « monLien » alors affiche le message « allo ». Ceci sera fonctionnel même avec du html ajouté dynamiquement.
La méthode delegate
est nouveau dans la version 1.4.2 et a une utilité semblable. Par exemple :
$("#monDiv").delegate(".monLien", "click", function(){alert("allo");});
Ce qui veut dire : Dans l’élément dont le id est « monDiv », lorsqu’il y a un clique sur un élément ayant la classe « monLien » alors affiche le message « allo ». Ceci sera fonctionnel même avec du html ajouté dynamiquement dans l’élément « monDiv ».
Si on reprend la définition de l’exemple live
ça pourrait aussi être :
Dans l’élément racine du document, lorsqu’il y a un clique sur un élément ayant la classe « monLien » alors affiche le message « allo ». Ceci sera fonctionnel même avec du html ajouté dynamiquement dans la racine.
En réalité, depuis la version 1.4 la méthode delegate est équivalent à la méthode live. La preuve est dans la définition de la méthode delegate
du code source de jquery 1.4.2 :
delegate: function( selector, types, data, fn) {return this.live( types, data, fn, selector); }
Depuis 1.4 il est possible de passé un context avec le sélecteur pour l’utilisation du live
. Le code
$("#monDiv").delegate(".monLien", "click", function(){alert("allo");});
aura le même résultat que
$(".monLien", $("#monDiv")).live("click", function(){alert("allo");});
Réponse à la question initiale :
La méthode delegate est simplement un manière différente ou plus simple que d’utiliser la méthode live.