Path: csiph.com!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail From: Robert Berghaus Newsgroups: de.comp.lang.javascript Subject: Re: jQuery Wechsel von live() nach click() Date: Mon, 22 Aug 2016 12:17:59 +0200 Lines: 160 Message-ID: References: <4025524.fQgX0d2UCM@PointedEars.de> <2726748.gXyuZs7Mdh@PointedEars.de> Mime-Version: 1.0 Content-Type: text/plain; charset=utf-8; format=flowed Content-Transfer-Encoding: 8bit X-Trace: individual.net rw73thIhE9aq0CcKPgsWQgP2u/FZmksuUYnalq175BW3+gZfHF Cancel-Lock: sha1:ePlLrXXMNVPT7Z9wT/tRVSHad3U= User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101 Thunderbird/45.2.0 In-Reply-To: <2726748.gXyuZs7Mdh@PointedEars.de> Xref: csiph.com de.comp.lang.javascript:4769 Am 21.08.2016 um 13:04 schrieb Thomas 'PointedEars' Lahn: > Robert Berghaus wrote: > > [lesbar formatiert] > >> Am 21.08.2016 um 02:32 schrieb Thomas 'PointedEars' Lahn: >>> Das Problem ist aber anscheinend, dass Elemente mit der >>> Klasse “Jahr” dynamisch hinzugefügt werden und dann auf >>> diesen noch kein Event-Listener registriert ist. >> >> So ist es. Ich werde also nach dem Einfügen des Inhaltes den >> Event-Listener registrieren. Das Durchgehen vom DOM kann ich ja >> an jQuery delegieren. Das dürfte dann so aussehen: >> >> $( ".Jahr" ).on( "click", function( e ) { stopDefault( e ); >> JahrAusblenden( e ); } ); > > Das funktioniert dann, und nur dann, wenn ".Jahr" Dein > Einfügekontext ist, was ja nach Deiner eigenen Aussage nicht der > Fall ist. > > Christoph hat die richtige Lösung angedeutet: Registrier den > Event-Listener einmalig auf der Ebene Deines Einfügekontextes > oder (*nur falls es nicht anders geht*) auf Dokumentebene. Denn > *click*-Events bubblen – es ist also egal, ob die Elemente, > welche den Event auslösen, erst später hinzugefügt werden. Du > musst dann nur ausschliessen, dass die Aktionen auch für andere > Elemente unterhalb der Registrierungsebene ausgeführt werden. > Wie das mit jQuery geht, wird dem geneigten Leser zur Übung > überlassen (denn das ist hier kein jQuery-Forum). > > > Mir ist nicht klar, was Du mit Einfügekontext meinst. Meine HTML-Seite sieht vereinfacht so aus:
Nach dem einfügen mit AJAX sieht das so aus:

2016

15. Januar 2016
15.45 Uhr
was auch immer
Wer 1
Wo 1

29. Dezember 2016
15.45 Uhr
was auch immer
Wer 2
Wo 2

... Beim Clicken auf das Jahr soll der gesamte Bereich Termin_Kopf ausgeblendeten werden, beim Clicken auf Termin_Datum, Termin_Uhrzeit oder Termin_Art der Bereich Termin_Text. Meine *funktionierenden* Lösungen sehen jetzt so aus: nur mit JavaScript: el = document.getElementsByClassName( "Jahr" ); for ( i = 0; i < el.length; i++ ) { el[ i ].addEventListener( "click", function( e ) { stopDefault( e ); JahrAusblenden( e ); }, false ); } mit jQuery: $( ".Jahr" ).on( "click", function( e ) { stopDefault( e ); JahrAusblenden( e ); } ); >>> Die richtige Methode ist ausserdem nicht stopDefault(), >>> sondern e.preventDefault() [siehe ebenfalls die >>> API-Dokumentation; es handelt sich bei “e” um die Referenz >>> auf ein *jQuery*-Event-Objekt, daher hat e auch die >>> preventDefault-Methode, wenn die DOM-Implementierung sie für >>> Event-Objekte nicht bereitstellt – der übliche Ansatz für >>> Event-Listener- Wrapper]). [Ausser das benutzerdefinierte >>> stopDefault() macht mehr als das jQuery-e.preventDefault().] >> >> Die Funktion macht mehr: > > *Bist* *Du* *da* *auch* *wirklich* *ganz* *sicher*? > War ich zumindest ;-) >> function stopDefault( evt ) { if ( evt && evt.preventDefault ) >> { evt.preventDefault(); } else if ( window.event && >> window.event.returnValue ) { window.event.returnValue = false; >> } } // function stopDefault( evt ) { >> >> Das hatte ich entweder in einem jQuery Buch > > Wohl kaum. > >> oder in der dicken JavaScript 'Bibel' gefunden. > > Autsch. Schmeiss sie bitte weg, die „Bibel“ – wahrscheinlich > eine uralte Ausgabe von Danny Goodmans Machwerk. > >> Da es mir universeller erschien, habe ich es übernommen. > > Und was, denkst Du, machte *damals* das e.preventDefault() *von > jQuery*? > Ist das evt.preventDefault() eine jQuery oder eine JavaScript Funktion? Ich ging von JavaScript aus. In dem 'uralten' JavaScript Referenzwerk von David Flanagan steht das im übrigen so drin: function cancelHandler( event ) { var event = event || window.event; // for IE if ( event.preventDefault ) event.preventDefault(); // Standard-Technik if ( event.returnValue ) event.returnValue = false; // IE return false; } > > > Wenn Du die aktuelle jQuery-Version benutzt, brauchst Du obigen > Workaround nicht mehr, denn alle DOM-Implementierungen, die von > der jeweiligen neuen jQuery-Version unterstützt werden, haben ein > natives e.preventDefault(), was von jQuery nur noch getriggert > wird: > > > > [Womit klar sein sollte, dass man mit einer neuen jQuery-Version > immer auch Abwärtskompatibilität aufgibt. Bei anderen > Bibliotheken ist das nicht notwendigerweise der Fall.] > > Bitte kein Kammquoting. Thunderbird/Icedove hat sogar eine > Funktion, um Zitate gezielt neu umbrechen zu lassen (Edit → > Rewrap). > Ich hoffe, hier ist jetzt kein Kammquoting drin. vielen Dank für die Anregungen Robert