Quelle est la différence entre jQuery .live() et .on() ?

Question

Je vois qu'il y a une nouvelle méthode .on() dans jQuery 1.7 qui remplace l'option .live() dans les versions antérieures.

J'aimerais connaître la différence entre les deux et savoir quels sont les avantages de cette nouvelle méthode.

Answer 1

C'est assez clair dans le docs pourquoi vous ne voudriez pas utiliser le direct. Comme l'a également mentionné Felix, .on est un moyen plus simple de joindre des événements.

L'utilisation de la méthode .live() n'est plus recommandée depuis que des versions ultérieures de jQuery offrent de meilleures méthodes qui n'ont pas ses inconvénients. En particulier, l'utilisation de la méthode .live() :

• jQuery tente de récupérer les éléments spécifiés par le sélecteur avant d'appeler la fonction .live() qui peut être longue pour les documents volumineux.
• Le chaînage des méthodes n'est pas pris en charge. Par exemple, $("a").find(".offsite, .external").live( ... ); es no valide et ne fonctionne pas comme prévu.
• Puisque tous les .live() sont attachés à la document élément, les événements prennent le plus longtemps et le plus lentement possible avant d'être traités.
• Appel à event.stopPropagation() dans le gestionnaire d'événements est inefficace pour arrêter les gestionnaires d'événements attachés plus bas dans le document ; l'événement s'est déjà propagé à l'ensemble du document. document .
• Le site .live() interagit avec d'autres méthodes d'événements d'une manière qui peut être surprenante, par exemple, $(document).unbind("click") supprime tous les gestionnaires de clics attachés par tout appel à .live() !

Answer 2

Une différence sur laquelle les gens butent quand ils passent de .live() a .on() est que les paramètres de .on() sont légèrement différentes lorsqu'il s'agit de lier des événements à des éléments ajoutés dynamiquement au DOM.

Voici un exemple de la syntaxe que nous utilisions avec la fonction .live() méthode :

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Maintenant avec .live() étant dépréciée dans la version 1.7 de jQuery et supprimée dans la version 1.9, vous devez utiliser l'élément .on() méthode. Voici un exemple équivalent utilisant la méthode .on() méthode :

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Veuillez noter que nous appelons .on() contre le document plutôt que contre le bouton lui-même . Nous spécifions le sélecteur de l'élément dont nous écoutons les événements dans le second paramètre.

Dans l'exemple ci-dessus, j'appelle .on() sur le document, mais vous obtiendrez de meilleures performances si vous utilisez un élément plus proche de votre sélecteur. Tout élément ancêtre fonctionnera tant qu'il existe sur la page avant que vous n'appeliez .on() .

Ceci est expliqué ici dans la documentation mais il est assez facile de le manquer.

Answer 3

Voir le Blog officiel

[Les nouvelles API .on() et .off() unifient toutes les façons d'attacher des événements à un document dans jQuery. événements à un document dans jQuery - et elles sont plus courtes à taper ! [...]

Answer 4

Bon tutoriel sur la différence entre "on" et "live".

Citation du lien ci-dessus

Quel est le problème avec .live()

L'utilisation de la méthode .live() n'est plus recommandée depuis que des versions ultérieures de jQuery offrent de meilleures méthodes qui n'ont pas ses inconvénients. En particulier, l'utilisation de la méthode .live() :

1. jQuery tente de récupérer les éléments spécifiés par le sélecteur avant d'appeler la méthode .live(), ce qui peut prendre du temps sur des documents volumineux.
2. Le chaînage des méthodes n'est pas pris en charge. Par exemple, $("a").find(".offsite, .external").live( ) ; n'est pas valide et ne fonctionne pas comme prévu. ne fonctionne pas comme prévu.
3. Puisque tous les événements .live() sont attachés à l'élément l'élément de document, les événements prennent le chemin le plus long et le plus lent possible avant d'être traités.
4. L'appel à event.stopPropagation() dans le gestionnaire d'événements est inefficace pour arrêter les gestionnaires d'événements à la fin de leur cycle de vie. est inefficace pour arrêter les gestionnaires d'événements attachés plus bas dans le document le document ; l'événement s'est déjà propagé au document.
5. Le site La méthode .live() interagit avec d'autres méthodes d'événements d'une manière qui peut être surprenantes, par exemple, $(document).unbind("click") supprime tous les gestionnaires de clics attachés par tout appel à .live() !

Answer 5

Je suis l'auteur d'une extension Chrome "Enregistrer le commentaire" qui utilise jQuery, et une autre qui utilise .live() . La façon dont l'extension fonctionne est d'attacher un écouteur à toutes les zones de texte en utilisant . live() - Cela a bien fonctionné, car à chaque fois que le document changeait, le listener était toujours attaché à toutes les nouvelles zones de texte.

J'ai déménagé à .on() mais ça ne fonctionne pas aussi bien. Il n'attache pas l'écouteur à chaque fois que le document est modifié - j'ai donc recommencé à utiliser la méthode suivante .live() . C'est un bug je suppose dans .on() . Il faut juste être prudent, je suppose.