jQuery 1.9 .live () n'est pas une fonction

242

J'ai récemment mis à jour jQuery de 1.8 à 2.1. J'ai soudain découvert que les .live()arrêts fonctionnent.
Je reçois l'erreur TypeError: $(...).live is not a function.

Existe-t-il une méthode que je peux utiliser à la place de .live()?

javascript jquery function live deprecated ngplayground
la source

Réponses:

509

jQuery .live()a été supprimé à partir de la version 1.9.

Cela signifie que si vous effectuez une mise à niveau à partir de la version 1.8 et antérieure, vous remarquerez que les choses se cassent si vous ne suivez pas le guide de migration ci-dessous. Vous ne devez pas simplement remplacer .live()par .on()!

Lisez avant de commencer une recherche et remplacez:

Pour les correctifs rapides / à chaud sur un site en direct, ne remplacez pas simplement le mot-clé livepar on,
car les paramètres sont différents !

.live(events, function)

doit correspondre à:

.on(eventType, selector, function)

Le sélecteur (enfant) est très important! Si vous n'avez pas besoin de l'utiliser pour une raison quelconque, réglez-le sur null.

Exemple de migration 1:

avant:

$('#mainmenu a').live('click', function)

après, vous déplacez l'élément enfant ( a) vers le .on()sélecteur:

$('#mainmenu').on('click', 'a', function)

Exemple de migration 2:

avant:

$('.myButton').live('click', function)

après, vous déplacez l'élément ( .myButton) vers le .on()sélecteur, et trouvez l'élément parent le plus proche (de préférence avec un ID):

$('#parentElement').on('click', '.myButton', function)

Si vous ne savez pas quoi mettre en tant que parent, bodyfonctionne toujours:

$('body').on('click', '.myButton', function)

Voir également:

Samuel Liew
la source
56

Vous pouvez éviter de refactoriser votre code en incluant le code JavaScript suivant 

jQuery.fn.extend({
    live: function (event, callback) {
       if (this.selector) {
            jQuery(document).on(event, this.selector, callback);
        }
        return this;
    }
});
Liran Barniv
la source
3
Devrait inclure un return this;à la fin de la fonction afin de préserver la capacité de chaînage
Guerilla
Est-ce que son utilisation causera des problèmes à l'avenir?
Islam Elshobokshy
15

La documentation de l'API jQuery répertorie live()les éléments obsolètes à partir de la version 1.7 et supprimés à partir de la version 1.9: lien .

version obsolète: 1.7, supprimée: 1.9

En outre, il déclare:

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d'événements. Les utilisateurs d'anciennes versions de jQuery doivent utiliser .delegate () de préférence à .live ()

Sirko
la source
Merci d'avoir mentionné la version compatible vers l'avant: .delegate ()
Edward Olamisan
13

Port avant de .live()pour jQuery> = 1.9 Évite de refactoriser les dépendances JS sur .live() Utilise un contexte de sélecteur DOM optimisé 

/** 
 * Forward port jQuery.live()
 * Wrapper for newer jQuery.on()
 * Uses optimized selector context 
 * Only add if live() not already existing.
*/
if (typeof jQuery.fn.live == 'undefined' || !(jQuery.isFunction(jQuery.fn.live))) {
  jQuery.fn.extend({
      live: function (event, callback) {
         if (this.selector) {
              jQuery(document).on(event, this.selector, callback);
          }
      }
  });
}
David Thomas
la source
Cela a très bien fonctionné pour mon cas: je dois travailler obligatoirement sur jQuery 1.11.2. Je vous remercie!
vcoppolecchia
5

.live () était obsolète et a maintenant été supprimé de jQuery 1.9 Vous devez utiliser .on ()

koopajah
la source
5

Un correctif très simple qui n'a pas besoin de changer votre code, ajoutez simplement un script de migration jquery, téléchargez ici https://github.com/jquery/jquery-migrate/

Il fournit des fonctions obsolètes mais nécessaires comme "live", "navigateur", etc.

Tofeeq
la source
2

J'ai tendance à ne pas utiliser la syntaxe .on (), si ce n'est pas nécessaire. Par exemple, vous pouvez migrer plus facilement comme ceci:

vieux:

$('.myButton').live('click', function);

Nouveau:

$('.myButton').click(function)

Voici une liste de gestionnaires d'événements valides: https://api.jquery.com/category/forms/

Gerfried
la source
3
Je pense que la syntaxe .on () est requise uniquement pour le contenu chargé dynamiquement (par exemple, les éléments ajoutés après le chargement de la page).
T30
1

Si vous utilisez la gemme jQuery de Ruby on Rails jquery-railset pour une raison quelconque, vous ne pouvez pas refactoriser votre code hérité, la dernière version qui le prend toujours en charge est 2.1.3et vous pouvez le verrouiller en utilisant la syntaxe suivante sur votre Gemfile:

gem 'jquery-rails', '~> 2.1', '= 2.1.3'

alors vous pouvez utiliser la commande suivante pour mettre à jour:

bundle update jquery-rails

J'espère que cela aidera d'autres personnes confrontées à un problème similaire.

fagiani
la source