index,follow

jQuery .on(): Die Nachfolgerin für .live()

14.05.2013, 17:47 von Daniel || (Kommentare: 0) || Mit anderen teilen

Die erst in jQuery 1.3 eingeführte Methode .live() wurde nun endgültig mit Version 1.9 wieder rausgekickt. Doch was bietet sich als Ersatz an? Dieser Artikel hilft bei der Aufklärung.

Warum wurde .live() wieder abgeschafft?

Ganz einfach: Aus Performance-Gründen! Die Verwendung von jQuery .live() hatte einige Nachteile. So versuchte jQuery stets, das Element auf herkömmlichen Weg zu finden, bevor es mit .live() weiterging. Darüberhinaus nutzte die Funktion stets document als oberstes Element, um das gesuchte Element zu finden. Gerade bei schwergewichtigen Seiten ein klarer Nachteil, da quasi das gesamte DOM durchsucht werden musste.

jQuery4u schrieb dazu bereits 2011 einen sehr aufschlussreichen Artikel. Darin findet sich auch eine Grafik, die den Performance-Nachteil gut veranschaulicht.

Und die Alternative?

Die heißt .on(). Doch nicht nur das. .on() kann ebenfalls als Ersatz für .bind() gesehen werden und dient damit der Vereinheitlichung des Codes. Wie ebenfalls im oben verlinkten jQuery4u-Artikel zu lesen ist, nutzt .bind() seit jQuery 1.7 ebenfalls .on() als Eventhandler.

Die Syntax

Wie seit jeher kann .on() wie .bind() benutzt werden:

$('.myElement').on('touchstart', function() {
  // mache irgendwas
});

Auf das Element myElement wird das Event touchstart registriert und der darin befindliche Code ausgeführt. Für den .live()-Ersatz wird der Eventhandler ein wenig erweitert. Nehmen wir an, in einem älteren Projekt gab es folgende Anweisung:

$('.myElement').live('click', function() {
  $(this).parent().empty().append($myNewElements);
});

Seit jQuery 1.7, spätestens jedoch seit 1.9, wird nun daraus:

$('.myParentElement').on('click', '.myElement', function() {
  $(this).parent().empty().append($myNewElements);
});

Der erste Selektor .myParentElement, auf den .on() angewandt wird, ist der Knoten, der sich bereits zum Zeitpunkt des Ladens der Seite (also domready) im DOM befand.

Das erste Argument click ist das Event.

Das Zweite .myElement das Element, welches dynamisch hinzugefügt wurde und auf dass sich das Event bezieht. .myElement muss zwingend ein Kindelement von .myParentElement sein.

Aus Performance-Gründen sollte auch stets daran gedacht werden, .on() wenn möglich nicht auf document anzuwenden, da es zu Konflikten mit anderen Event Listenern kommen kann. Außerdem kann der Weg von document, einer der höchsten Ebenen im DOM, bis hin zum gesuchten Element sehr lang sein.

jQuery Migrate

Dieses von jQuery selbst bereitgestellte Plugin kann eingesetzt werden, um älteren Code zu finden und mit neueren Versionen von jQuery kompatibel zu machen.

Das Plugin selbst macht 2 Dinge. Auf der einen Seite gibt es Warnungen und Empfehlungen über die Konsole aus, sodass man seinen alten Code entsprechend umbauen kann. Auf der anderen Seite bringt es alten Code zum Laufen. So lassen sich beispielsweise andere alte Plugins nutzen, für die es keinen Ersatz gibt oder deren Neu-Entwicklung zu lange dauert.

Schlüsselwörter zu diesem Beitrag

« Zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Einen Kommentar schreiben



Nutze Deinen Gravatar.


Bitte rechnen Sie 8 plus 6.