Dieser Beitrag nimmt am Dr. Web Autorenwettbewerb teil. Sie helfen dem Autor durch Ihr Feedback und Ihre Kritik in Form eines Kommentars. Diese fließen ebenso wie der erzielte Traffic und eventuelle Verlinkungen in die Entscheidung über die zu gewinnenden Preise ein.
von Michael Dietz
Jedem der jQuery schon einmal benutzt hat dürften sie bekannt sein: Events wie “click” oder “mouseover”. In den meisten Fällen sind sie auch völlig ausreichend um den gewünschten Effekt zu erzielen. Allerdings gibt es Ausnahmen, bei denen sie scheinbar nicht funktionieren, wie das folgende Beispiel zeigt.
Gegeben ist eine Liste mit einem Listeneintrag. Bei einem Klick auf einen Eintrag soll die Liste um einen weiteren Punkt ergänzt werden. Der HTML-Code dazu sieht so aus:
<ol> <li>Klick mich</li> </ol>
Um die Liste zu erweitern, verwenden wir zunächst das click-Event und fügen mit .append(…) ein neues <li>-Element am Ende der Liste ein. Daraus ergibt sich folgender jQuery-Code:
$(function() {
$("li").click(function() {
$("ol").append("<li>Neuer Eintrag, klick mich</li>");
});
});
Klickt man nun auf den ersten Listenpunkt, wird die Liste wie erwartet um einen Eintrag erweitert. Das ganze sieht dann in etwa so aus:
- Klick mich
- Neuer Eintrag, klick mich
Bei einem Klick auf den zweiten Eintrag passiert jedoch überhaupt nichts. Der Grund dafür ist, dass mit $(“li”).click(…) nur diejenigen <li>-Elemente erfasst werden, die zum Zeitpunkt des Aufrufs im DOM vorhanden sind.
Da wir die .click(…) Funktion aber direkt aufrufen, nachdem das Dokument geladen wurde, trifft dies nur auf den ersten Listenpunkt zu (zur Erinnerung: $(function() {…}); wird ausgeführt, wenn das Dokument geladen ist). Unsere Funktion wird daher auch nur bei einem Klick auf das erste <li>-Element ausgelöst.
Abhilfe schafft hier das seit jQuery 1.3 verfügbare live-Event. Im Gegensatz zu .click erwartet .live jedoch zwei Parameter. Der erste Parameter gibt die Art des Events an während der zweite die Funktion festlegt, die beim Eintreten des Events ausgeführt werden soll. Wir ersetzen also lediglich .click(function() { durch .live(“click”, function() { und erhalten folgenden Code:
$(function() {
$("li").live("click", function() {
$("ol").append("<li>Neuer Eintrag, klick mich</li>");
});
});
Klickt man jetzt auf einen Listenpunkt, wird die Liste wie gewünscht erweitert, auch wenn es sich bei dem Eintrag selbst um einen neu hinzugefügten handelt. Mit dem live-Event werden nämlich nicht nur die zum Zeitpunkt des Aufrufs in der DOM vorhandenen Elemente, sondern auch zukünftig vorhandene Elemente erfasst und an das Event gebunden.
Neben click unterstützt die live-Funktion derzeit außerdem folgende Events: dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress und keyup. Wem das aber noch nicht ausreicht, der sollte sich das liveQuery-Plugin einmal genauer ansehen. Es funktioniert relativ ähnlich, unterstützt aber alle Arten von Events.
(sl),
Für den Wettbewerb können keine Beiträge mehr eingereicht werden, über Autoren freuen wir uns trotzdem. In dem Fall: bitte hier entlang.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Danke für den Tipp!
Das oben genannte Problem ist mir bisher nie aufgefallen, aber wenn es jetzt kommen sollte, weiß ich woran es liegt und vorallem wie ich es lösen kann.
Danke,danke,danke…
Ich schlag mich schon einigeZeit mit diesem Problem herum,
diese Erklärung hilft mir wirklich weiter!
Wie Simon bin ich bislang auch noch nicht in diese Falle getappt – aber wohl dem, der die Gefahren kennt
Danke!
Danke für den hilfreichen Tipp! Immer gut zu wissen, dass man nicht selbst die Ursache des Problems ist
Oh ja, dieses nette Problem mit dem Aufrufen von noch nicht vorhandenen Objekten hat mich am Anfang ein paar Stunden gekostet. DANKE!
MfG
Marius
guter Tip und ein nützliches Tutorial ….
Super Tip, gut zu wissen
Kleiner Nachtrag: Ab jQuery 1.4 wird die live-Funktion alle Arten von Events unterstützen.
http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released/
Danke für den Tip. Ich arbeite nun schon eine Weile mit jQuery, aber das live-Event muss sich meinen Blicken bis dato entzogen haben.
mhm naja, typisch jquery benutzer
ist doch klar, dass das nicht funktioniert, ist ganz einfach ein logik-fehler!