Groups > de.comp.lang.javascript > #4769

Re: jQuery Wechsel von live() nach click()

From	Robert Berghaus <Robert.Berghaus@gmx.de>
Newsgroups	de.comp.lang.javascript
Subject	Re: jQuery Wechsel von live() nach click()
Date	2016-08-22 12:17 +0200
Message-ID	<e201qnFe708U1@mid.individual.net> (permalink)
References	<e1re7iFb2buU1@mid.individual.net> <npa41p$o8r$2@solani.org> <4025524.fQgX0d2UCM@PointedEars.de> <e1te7hFp97oU1@mid.individual.net> <2726748.gXyuZs7Mdh@PointedEars.de>

Show all headers | View raw

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).
>
> <https://www.w3.org/TR/dom/#events>
>

Mir ist nicht klar, was Du mit Einfügekontext meinst.
Meine HTML-Seite sieht vereinfacht so aus:

<body>
    <div id="SeitenInhalt">
    </div>
</body>

Nach dem einfügen mit AJAX sieht das so aus:
<body>
    <div id="SeitenInhalt">
       <div id="Jahr_2016" class="Termine_Jahr">
          <h1 class="Jahr">2016</h1>
          <article class="Termin_Kopf">
             <div class="Termin_Datum">15. Januar 2016</div>
             <div class="Termin_Uhrzeit">15.45 Uhr</div>
             <div class="Termin_Art">was auch immer</div>
             <article class="Termin_Text">
                <div class="Text_1">Wer 1</div>
                <div class="Text_2">Wo 1</div><br />
             </article>
          </article>
          <article class="Termin_Kopf">
             <div class="Termin_Datum">29. Dezember 2016</div>
             <div class="Termin_Uhrzeit">15.45 Uhr</div>
             <div class="Termin_Art">was auch immer</div>
             <article class="Termin_Text">
                <div class="Text_1">Wer 2</div>
                <div class="Text_2">Wo 2</div><br />
             </article>
          </article>
       </div>
    </div>
    ...
</body>

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;
}

> <https://github.com/jquery/jquery/blob/1.12-stable/src/event.js#L825-L842>
>
>  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:
>
> <https://github.com/jquery/jquery/blob/2.2-stable/src/event.js#L598-L606>
>
>  [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

Back to de.comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

jQuery Wechsel von live() nach click() Robert Berghaus <Robert.Berghaus@gmx.de> - 2016-08-20 18:18 +0200
  Re: jQuery Wechsel von live() nach click() "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-08-20 19:29 +0200
    Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-21 02:32 +0200
      Re: jQuery Wechsel von live() nach click() "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-08-21 11:59 +0200
        Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-21 13:06 +0200
      Re: jQuery Wechsel von live() nach click() Robert Berghaus <robert.berghaus@gmx.de> - 2016-08-21 12:31 +0200
        Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-21 13:04 +0200
          Re: jQuery Wechsel von live() nach click() Robert Berghaus <robert.berghaus@gmx.de> - 2016-08-21 13:28 +0200
            Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-21 13:34 +0200
              Re: jQuery Wechsel von live() nach click() Robert Berghaus <Robert.Berghaus@gmx.de> - 2016-08-22 12:28 +0200
                Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-22 19:15 +0200
          OT: Thunderbird Rewrap (was: jQuery Wechsel von live() nach click()) "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-08-21 15:05 +0200
          Re: jQuery Wechsel von live() nach click() Robert Berghaus <Robert.Berghaus@gmx.de> - 2016-08-22 12:17 +0200
            Re: jQuery Wechsel von live() nach click() "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-08-22 15:27 +0200
              Re: jQuery Wechsel von live() nach click() Robert Berghaus <Robert.Berghaus@gmx.de> - 2016-08-22 16:27 +0200
                Re: jQuery Wechsel von live() nach click() "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-08-22 17:44 +0200
                Re: jQuery Wechsel von live() nach click() Robert Berghaus <Robert.Berghaus@gmx.de> - 2016-08-25 12:44 +0200
                Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-25 23:45 +0200
                Re: jQuery Wechsel von live() nach click() Robert Berghaus <Robert.Berghaus@gmx.de> - 2016-08-26 11:25 +0200
                Re: jQuery Wechsel von live() nach click() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-26 21:19 +0200

csiph-web