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

Je vois qu'il existe une nouvelle méthode .on()dans jQuery 1.7 qui remplace celle .live()des versions antérieures.

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

Il est assez clair dans la documentation pourquoi vous ne voudriez pas utiliser live. Comme mentionné par Felix, il .onexiste une manière plus simple de joindre des événements.

L'utilisation de la méthode .live () n'est plus recommandée car les versions ultérieures de jQuery offrent de meilleures méthodes qui n'ont pas ses inconvénients. En particulier, les problèmes suivants surviennent 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 .live()méthode, 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 .live()événements sont attachés à l' documentélément, les événements empruntent le chemin le plus long et le plus lent possible avant d'être traités.
• L'appel event.stopPropagation() du 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 .live()méthode 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()!

Une différence sur laquelle les gens trébuchent en passant 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 .live()méthode:

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

function doSomething() {
    // do something
}

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

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

function doSomething() {
    // do something
}

Veuillez noter que nous appelons .on()contre le document plutôt que sur 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()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 appeliez .on().

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

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! [...]

.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 dans le futur.

$( "#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 est l'exemple.

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

Bon tutoriel sur la différence entre on 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 offrent de meilleures méthodes qui n'ont pas ses inconvénients. En particulier, les problèmes suivants surviennent 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. Puisque tous les événements .live () sont attachés à 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 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 clics attachés par tout appel à .live ()!

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

La méthode .live () est utilisée lorsque vous gérez la génération dynamique de contenu ... comme je l'ai créé sur un programme qui ajoute un onglet lorsque je change la valeur d'un curseur Jquery et que je souhaite attacher la fonctionnalité de bouton de fermeture à tous les onglets qui générera ... 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 très bien ...

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

J'ai déménagé .on()mais ça ne marche pas aussi bien. Il n'attache pas l'auditeur chaque fois que le document change - je suis donc revenu à l'utilisation .live(). C'est un bug dans lequel je suppose .on(). Faites juste attention, je suppose.

J'ai l'obligation d'identifier l'événement de fermeture du navigateur. Après avoir fait des recherches, je suis en train de suivre en utilisant jQuery 1.8.3

1. Activez un indicateur à l'aide de jQuery suivant lorsque vous cliquez sur un lien hypertexte

   $ ('a'). live ('clic', function () {cleanSession = false;});

2. Activez un indicateur en utilisant jQuery suivant lorsque vous cliquez à tout moment sur le type de bouton d'entrée de soumission

$ ("input [type = submit]"). live ('click', function () {alert ('input button cliqué'); cleanSession = false;});

1. Activez un indicateur en utilisant jQuery suivant à chaque fois que l'envoi d'un formulaire se produit

$ ('formulaire'). live ('soumettre', function () {cleanSession = false;});

Maintenant, chose importante ... ma solution ne fonctionne que si j'utilise .live à la place .on. Si j'utilise .on, l'événement est déclenché après l'envoi du formulaire et ce qui est trop tard. Plusieurs fois, mes formulaires sont soumis à l'aide d'un appel javascript (document.form.submit)

Il y a donc une différence essentielle entre .live et .on. Si vous utilisez .live, vos événements sont déclenchés immédiatement, mais si vous passez à .on, ils ne sont pas déclenchés à temps