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.
#1 by Axel on 29 juin 2010 - 10 h 01 min
Merci de m’éclairer. Content de trouver des réponses sur un blog français.
#2 by ahmed on 28 septembre 2011 - 11 h 55 min
Merci pour ces explications! ça m’a vraiment aidé!
#3 by Guillaume on 7 mars 2012 - 8 h 00 min
Sauf erreur de ma part, il y a quand même une différence entre live et delegate au niveau de l’optimisation des performances. La méthode live va associer des events pour chaque éléments ayant pour classe .monLien, et doit détecter le rafraichissement de ses éléments qu’il contient, alors que delegate va associer l’évènement à l’élément parent, qui va dispatcher ça sur ses éléments enfants définis dans la méthode. Ce ne sont donc pas simplement des manières différentes …
#4 by Jimmy on 7 mars 2012 - 10 h 24 min
Effectivement, je ne trouve plus le lien mais j’ai déjà lu un article qui explique exactement ce que tu dis. Il y a une différence au niveau de l’exécution, donc au niveau de la performance.
Par contre, depuis jQuery 1.7 les méthodes .on (http://api.jquery.com/on/) et .off (http://api.jquery.com/off/) vient simplifier tout le questionnement d’utilisation de .live, .delegate ou .bind
#5 by Guillaume on 12 mars 2012 - 9 h 13 min
Tout à fais, voila qui devrait mettre tout le monde d’accord 😉