jQuery 1.9 .live () ist keine Funktion

242

Ich habe kürzlich jQuery von 1.8 auf 2.1 aktualisiert. Ich stellte plötzlich fest, dass das nicht mehr .live()funktioniert.
Ich bekomme den Fehler TypeError: $(...).live is not a function.

Gibt es eine Methode, die ich anstelle von verwenden kann .live()?

javascript jquery function live deprecated Spielplatz
quelle

Antworten:

509

jQuery .live()wurde ab Version 1.9 entfernt.

Das heißt, wenn Sie ein Upgrade von Version 1.8 und früher durchführen, werden Sie feststellen, dass Probleme auftreten, wenn Sie die unten stehende Migrationsanleitung nicht befolgen. Sie dürfen nicht einfach ersetzen .live()mit .on()!

Lesen Sie, bevor Sie mit dem Suchen und Ersetzen beginnen:

Ersetzen Sie für schnelle / Hotfixes auf einer Live-Site nicht nur das Schlüsselwort livedurch on,
da die Parameter unterschiedlich sind !

.live(events, function)

sollte zuordnen zu:

.on(eventType, selector, function)

Der (Kinder-) Selektor ist sehr wichtig! Wenn Sie dies aus irgendeinem Grund nicht verwenden müssen, setzen Sie es auf null.

Migrationsbeispiel 1:

Vor:

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

Danach verschieben Sie das untergeordnete Element ( a) in den .on()Selektor:

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

Migrationsbeispiel 2:

Vor:

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

Danach verschieben Sie das Element ( .myButton) in den .on()Selektor und suchen das nächste übergeordnete Element (vorzugsweise mit einer ID):

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

Wenn Sie nicht wissen, was Sie als Eltern setzen sollen, bodyfunktioniert dies immer:

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

Siehe auch:

Samuel Liew
quelle
56

Sie können das Umgestalten Ihres Codes vermeiden, indem Sie den folgenden JavaScript-Code einfügen 

jQuery.fn.extend({
    live: function (event, callback) {
       if (this.selector) {
            jQuery(document).on(event, this.selector, callback);
        }
        return this;
    }
});
Liran Barniv
quelle
3
Sollte return this;am Ende der Funktion ein enthalten, um die Verkettungsfähigkeit zu erhalten
Guerilla
Wird dies in Zukunft zu Problemen führen?
Islam Elshobokshy
15

In der Dokumentation zur jQuery-API ist ab live()Version 1.7 veraltet und ab Version 1.9 entfernt: link .

Version veraltet: 1.7, entfernt: 1.9

Darüber hinaus heißt es:

Ab jQuery 1.7 ist die .live () -Methode veraltet. Verwenden Sie .on () , um Ereignishandler anzuhängen. Benutzer älterer jQuery-Versionen sollten .delegate () anstelle von .live () verwenden.

Sirko
quelle
Vielen Dank für die Erwähnung der vorwärtskompatiblen Version: .delegate ()
Edward Olamisan
13

Weiterleitungsport von .live()für jQuery> = 1.9 Vermeidet das Refactoring von JS-Abhängigkeiten von .live() Verwendet optimierten DOM- Auswahlkontext

/** 
 * 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
quelle
Für meinen Fall hat das super geklappt: Ich musste zwingend an jQuery 1.11.2 arbeiten. Danke dir!
Vcoppolecchia
5

Eine sehr einfache Lösung, bei der Sie Ihren Code nicht ändern müssen. Fügen Sie einfach das JQuery-Migrationsskript hinzu und laden Sie es hier herunter. Https://github.com/jquery/jquery-migrate/

Es bietet veraltete, aber benötigte Funktionen wie "live", "browser" usw.

Tofeeq
quelle
2

Ich neige dazu, die .on () -Syntax nicht zu verwenden, wenn dies nicht erforderlich ist. Sie können beispielsweise einfacher migrieren:

alt:

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

Neu:

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

Hier ist eine Liste der gültigen Ereignishandler: https://api.jquery.com/category/forms/

Gerfried
quelle
3
Ich denke, die .on () -Syntax ist nur für dynamisch geladenen Inhalt erforderlich (zum Beispiel für Elemente, die nach dem Laden der Seite hinzugefügt wurden).
T30
1

Wenn Sie zufällig das jQuery-Juwel von Ruby on Rails verwenden jquery-railsund aus irgendeinem Grund Ihren Legacy-Code nicht umgestalten können, ist die letzte Version, die noch unterstützt wird, 2.1.3und Sie können ihn mithilfe der folgenden Syntax sperren Gemfile:

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

Anschließend können Sie den folgenden Befehl zum Aktualisieren verwenden:

bundle update jquery-rails

Ich hoffe, dass dies anderen hilft, die mit einem ähnlichen Problem konfrontiert sind.

Fagiani
quelle