web-dev-qa-db-fra.com

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

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

Je suis intéressé à connaître la différence entre eux et quels sont les avantages de l'utilisation de cette nouvelle méthode.

jqueryjquery-1.7
84
ajbeaven

Il est assez clair dans les docs pourquoi vous ne voudriez pas utiliser live. Comme mentionné par Felix, .on Est un moyen plus simple de rattacher des événements.

L'utilisation de la méthode .live () n'est plus recommandée car les versions ultérieures de jQuery proposent de meilleures méthodes qui n'ont pas ses inconvénients. En particulier, les problèmes suivants se posent avec l'utilisation de .live ():

  • 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.
  • Les méthodes de chaînage ne sont pas prises en charge. Par exemple, $("a").find(".offsite, .external").live( ... ); n'est pas valide et ne fonctionne pas comme prévu.
  • Étant donné que tous les événements .live() sont attachés à l'élément document, les événements prennent le chemin le plus long et le plus lent possible avant d'être gérés.
  • L'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é à document.
  • La méthode .live() interagit avec d'autres méthodes d'événement de manière qui peut être surprenante, par exemple, $(document).unbind("click") supprime tous les gestionnaires de clic attachés par tout appel à .live()!
98
aziz punjani

Une différence sur laquelle les gens trébuchent lorsqu'ils passent de .live() à .on() est que les paramètres de .on() sont légèrement différents lors de la liaison d'événements à des éléments ajoutés dynamiquement au DOM.

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

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

function doSomething() {
    // do something
}

Maintenant que .live() est obsolète dans jQuery version 1.7 et supprimé dans la version 1.9, vous devez utiliser la méthode .on(). Voici un exemple équivalent utilisant la méthode .on():

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

function doSomething() {
    // do something
}

Veuillez noter que nous appelons .on() contre le document plutôt que le bouton lui-même . Nous spécifions le sélecteur de l'élément dont nous écoutons les événements dans le deuxième 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 existera sur la page avant d'appeler .on().

Ceci est expliqué ici dans la documentation mais c'est assez facile à manquer.

11
ajbeaven

Voir le Blog officiel

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

4
FloydThreepwood
.live()

Cette méthode est utilisée pour attacher un gestionnaire d'événements pour tous les éléments qui correspondent au sélecteur actuel, maintenant et à l'avenir.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

et

.on()

Cette méthode est utilisée pour attacher une fonction de gestionnaire d'événements pour un ou plusieurs événements aux éléments sélectionnés ci-dessous.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
2
Mohammed Abrar Ahmed

Bon tutoriel sur la différence entre le vs vs 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 car les versions ultérieures de jQuery proposent de meilleures méthodes qui n'ont pas ses inconvénients. En particulier, les problèmes suivants se posent avec l'utilisation de .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. Les méthodes de chaînage ne sont pas prises en charge. Par exemple, $ ("a"). Find (". Offsite, .external"). Live (…); n'est pas valide et ne fonctionne pas comme prévu.
  3. Étant donné que tous les événements .live () sont attachés à l'élément de document, les événements empruntent le chemin le plus long et le plus lent possible avant d'être gérés.
  4. L'appel de 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é au document.
  5. La méthode .live () interagit avec d'autres méthodes d'événement d'une manière qui peut être surprenante, par exemple, $ (document) .unbind ("click") supprime tous les gestionnaires de clic attachés par tout appel à .live ()!
1
venkat

pour plus d'informations, consultez-le .. . live () et . on ()

La méthode .live () est utilisée lorsque vous traitez avec la génération dynamique de contenu ... comme j'ai créé sur un programme qui ajoute un onglet lorsque je change la valeur d'un curseur Jquery et que je veux attacher la fonctionnalité du bouton de fermeture à tous les onglets qui va générer ... le code que j'ai essayé est ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

et ça marche preety bien cool ...

0
Hiren

Je suis l'auteur d'une extension Chrome "Comment Save" qui utilise jQuery et une qui utilise .live(). Le fonctionnement de l'extension est en attachant un écouteur à toutes les zones de texte en utilisant .live() - cela fonctionnait bien car chaque fois que le document changeait, il attachait toujours l'écouteur à toutes les nouvelles zones de texte.

Je suis passé à .on() mais ça ne marche pas aussi bien. Il n'attache pas l'auditeur chaque fois que le document change - j'ai donc recommencé à utiliser .live(). C'est un bogue je suppose dans .on(). Soyez prudent, je suppose.

0
PixelPerfect3