Jquery live() vs delegate()

Question

J'ai lu quelques messages ici et ailleurs sur le web concernant les différences entre live() et delegate() . Cependant, je n'ai pas trouvé la réponse que je cherchais (si c'est un doublon, dites-le moi).

Je sais que la différence entre live et delegate c'est que live ne peut pas être utilisé dans une chaîne. J'ai également lu quelque part que delegate est dans certains cas plus rapide (meilleures performances).

Ma question est, y a-t-il une situation où vous devriez utiliser live au lieu de delegate ?

UPDATE

J'ai mis en place un simple test pour voir la différence de performance.

J'ai également ajouté la nouvelle .on() qui est disponible dans jQuery 1.7+.

Les résultats résument assez bien les problèmes de performance tels qu'ils sont énoncés dans les réponses.

• N'utilisez pas .live() à moins que votre version de jQuery ne supporte pas .delegate() .
• N'utilisez pas .delegate() à moins que votre version de jQuery ne supporte pas .on() .

La différence entre .live() et .delegate() est BEAUCOUP plus grande qu'entre delegate() et .on() .

Answer 1

Je n'utilise jamais live ; je considère les avantages d'utiliser delegate pour être si substantielle qu'elle en devient écrasante.

Le seul avantage de live c'est que sa syntaxe est très proche de celle de bind :

$('a.myClass').live('click', function() { ... });

delegate utilise cependant une syntaxe un peu plus verbeuse :

$('#containerElement').delegate('a.myClass', 'click', function() { ... });

Ceci, cependant, me semble beaucoup plus explicite sur ce qui se passe réellement. Vous ne vous rendez pas compte de la live exemple que les événements sont effectivement capturés sur document ; avec delegate il est clair que la capture de l'événement a lieu le #containerElement . Vous pouvez faire la même chose avec live mais la syntaxe devient de plus en plus horrible.

La spécification d'un contexte pour vos événements à capturer améliore également les performances. Avec le live par exemple, chaque clic sur l'ensemble du document doit être comparé au sélecteur a.myClass pour voir si ça correspond. Avec delegate c'est-à-dire seulement les éléments dans #containerElement . Cela améliorera évidemment les performances.

Enfin, live exige que votre navigateur recherche a.myClass s'il existe ou non actuellement . delegate ne recherche les éléments que lorsque les événements sont déclenchés, ce qui offre un avantage supplémentaire en termes de performances.

---

NB delegate utilise live derrière les coulisses, de sorte que vous pouvez faire n'importe quoi avec live que vous pouvez faire avec delegate . Ma réponse les traite tels qu'ils sont couramment utilisés.

Notez également que ni live ni delegate est la meilleure façon de faire de la délégation d'événements dans le jQuery moderne. La nouvelle syntaxe (à partir de la version 1.7 de jQuery) fait appel à la balise on fonction. La syntaxe est la suivante :

$('#containerElement').on('click', 'a.myClass', function() { ... });

Answer 2

Ils sont exactement les mêmes, sauf que :

• .delegate() vous permet de réduire la section locale de la page, tandis que .live() doit traiter les événements de la page entière.
• .live() commence par une sélection DOM gaspillée

Lorsque vous appelez .delegate() il se retourne et appelle .live() mais passe le supplément contexte paramètre.

https://github.com/jquery/jquery/blob/master/src/event.js#L948-950

Ainsi, j'utiliserais toujours .delegate() . Si vous avez vraiment besoin qu'il traite tous les événements de la page, il suffit de lui donner l'attribut body comme contexte.

$(document.body).delegate('.someClass', 'click', function() {
    // run handler
});

Les anciennes versions de jQuery ont en fait delegate fonctionnalité. Il suffit de passer un sélecteur ou un élément comme propriété de contexte lors de l'appel à .live() . Bien entendu, il doit être chargé sur la page.

~~$('.someClass', '#someContainer').live('click',function() { // run handler });~~

Et vous avez le même comportement que .delegate() .

Answer 3

Deux situations me viennent à l'esprit :

1. Vous utiliseriez delegate sur le body et vous pouvez donc simplement utiliser live à la place, car c'est plus simple.

2. Vous devez utiliser une ancienne version de la bibliothèque jQuery, où l'option delegate n'est pas encore mis en œuvre.

Answer 4

Prenons l'exemple suivant

<ul id="items">  
   <li> Click Me </li>  
</ul>

$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

En passant un élément DOM comme contexte de notre sélecteur, nous pouvons faire en sorte que Live() se comporte (presque) de la même manière que delegate(). Il attache le gestionnaire au contexte, et non au document - qui est le contexte par défaut. Le code ci-dessous est équivalent à la version de delegate() présentée ci-dessus.

$("li", $("#items")[0]).live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
}); 

Ressources

Mais, il est préférable d'utiliser un délégué pour de meilleures performances. voir ici