tag:forum.selfhtml.org,2005:/selfjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht – SELFHTML-Forum2018-09-15T12:53:49Zhttps://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731655#m1731655ebody2018-09-12T09:49:46Z2018-09-12T09:49:46ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo,</p>
<p><a href="https://codepen.io/anon/pen/QVrWBV" rel="noopener noreferrer">https://codepen.io/anon/pen/QVrWBV</a></p>
<p>Bei Klick auf #element, soll ein neues Element eingefügt werden anstelle von #element.
"Element erstellen" verschwindet und "Äpfel" wird angezeigt.
Jetzt soll bei einem Klick auf "Äpfel" das Element #birnen eingefügt werden.
Das passiert aber nicht.</p>
<p><strong>1. Weil das DOM das Element #aepfel nicht kennt?</strong></p>
<p><strong>2. Muss man für so etwas wirklich etwas wie MutationObserver verwenden?</strong></p>
<p>Gruß
ebody</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>elementBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Element erstellen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"aepfel\">Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"birnen\">Birnen</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"aepfel\">Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731657#m1731657beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-09-12T10:02:58Z2018-09-12T10:02:58ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>hallo</p>
<blockquote>
<p><strong>1. Weil das DOM das Element #aepfel nicht kennt?</strong></p>
</blockquote>
<p>Du speicherst ja kein Objekt, das deinen Klickevent enthält.</p>
<blockquote>
<p><strong>2. Muss man für so etwas wirklich etwas wie MutationObserver verwenden?</strong></p>
</blockquote>
<p>Event-Delegation wäre hier angebracht.</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731659#m1731659dedlfix2018-09-12T10:07:46Z2018-09-12T10:07:46ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Tach!</p>
<blockquote>
<p><a href="https://codepen.io/anon/pen/QVrWBV" rel="noopener noreferrer">https://codepen.io/anon/pen/QVrWBV</a></p>
<p>Bei Klick auf #element, soll ein neues Element eingefügt werden anstelle von #element.</p>
</blockquote>
<p>Dann musst du das aber auch so tun. Der Code fügt stattdessen ein Kind-Element in #element ein.</p>
<blockquote>
<p>"Element erstellen" verschwindet und "Äpfel" wird angezeigt.</p>
</blockquote>
<p>Der Textnode in #element wird ausgetauscht durch das #aepfel-Element.</p>
<blockquote>
<p>Jetzt soll bei einem Klick auf "Äpfel" das Element #birnen eingefügt werden.
Das passiert aber nicht.</p>
</blockquote>
<p>Das kann nicht passieren, weil #aepfel keinen Eventhandler hat. Die Eventhandler-Zuweisung fand statt, als #aepfel noch gar nicht existierte. $('#aepfel') hat eine leere Menge geliefert, da können keine Events angehängt werden. Das Event-Anhängen blieb ohne Auswirkung und still, aufgrund der jQuery-Arbeitsweise, beim Nichtsfinden still und leise nichts zu machen. Mit Vanilla-JS hätte der Zugriff auf das nicht vorhandene Element einen Fehler ausgelöst.</p>
<p>Das Click-Event gelangt deshalb aufgrund des Bubbling weiter nach oben zum #element und das ersetzt seinen Inhalt mit dem #aepfel.</p>
<blockquote>
<p><strong>1. Weil das DOM das Element #aepfel nicht kennt?</strong></p>
</blockquote>
<p>Das kannst du selbst prüfen, wenn du die Entwicklertools des Browsers verwendest. Da sieht man aber auch, dass kein Event registriert ist.</p>
<blockquote>
<p><strong>2. Muss man für so etwas wirklich etwas wie MutationObserver verwenden?</strong></p>
</blockquote>
<p>Nö, man muss es nur richtig machen. Besonders die zeitliche Reihenfolge, wann man was zur Verfügung hat und auch erst dann bearbeiten kann.</p>
<p>dedlfix.</p>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731660#m1731660Auge2018-09-12T10:16:10Z2018-09-12T10:16:10ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo</p>
<blockquote>
<p>Bei Klick auf #element, soll ein neues Element eingefügt werden anstelle von #element.
"Element erstellen" verschwindet und "Äpfel" wird angezeigt.
Jetzt soll bei einem Klick auf "Äpfel" das Element #birnen eingefügt werden.</p>
<ol>
<li>Weil das DOM das Element #aepfel nicht kennt?</li>
</ol>
</blockquote>
<p>In der Tat. Zu dem Zeitpunkt, an dem <code>ready</code> feuert, existieren die Elemente <code>#aepfel</code> und <code>#birnen</code> nicht.</p>
<blockquote>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"aepfel\">Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"birnen\">Birnen</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"aepfel\">Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>Ich würde erwarten, dass die Registrierung der Eventhandler nach der Erstellung des jeweiligen DOM-Elements zum gewünschten Ergebnis führt. Ich habe das aber selbst nicht getestet.</p>
<p>Tschö, Auge</p>
<div class="signature">-- <br>
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br>
Kleine freie Männer von Terry Pratchett
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731661#m1731661Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-12T10:31:51Z2018-09-12T10:31:51ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@ebody</p>
<blockquote>
<pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Element erstellen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<pre><code class="block language-javascript"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</code></pre>
</blockquote>
<p>Das kann so nicht funktionieren. Bei manchen Nutzer passiert da beim Click was; aber andere können da überhaupt nicht clicken. Ein <code>div</code>-Element kann per se nicht mit der Tastatur angewählt werden.</p>
<p><strong>Merke: Niemals nicht-interaktive Elemente als Target von Click-Events verwenden!</strong></p>
<p>Wo immer eine <strong>Aktion</strong> auf einer Seite ausgeführt wird, muss das Element ein <code>button</code> sein. Wenn es ein <strong>Link</strong> zu einer anderen Stelle ist, ist <code>a</code>-Element mit <code>href</code>-Attribut richtig.</p>
<p>In diesem Fall also:</p>
<pre><code class="block good language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Element erstellen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
</code></pre>
<p>Den Button kannst du mit CSS wie gewünscht stylen.</p>
<p>LLAP </p>
<p>PS: Es ist ärgerlich, dass niemand der drei bereits gekommenen Antworten auf diesen Fehler hingewiesen hat.</p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731956#m1731956ebody2018-09-14T11:55:00Z2018-09-14T11:55:00ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo,</p>
<p>vielen Dank an alle. So hat es bei mir jetzt funktioniert:</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"aepfel\">Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"birnen\">Birnen</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>elementBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Element erstellen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>Gruß
ebody</p>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731962#m1731962Rolf B2018-09-14T13:07:07Z2018-09-14T13:08:31ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo ebody,</p>
<p>man weiß nicht, auf welchen Einsatzzweck dieses Codefragment hinausläuft. Es ist ja offenbar eine Demo noch ohne praktischen Wert. Aber die genutzte Technik ist für eine offene Webseite untauglich. Gunnar hat hinreichend erklärt, wieso.</p>
<p>Das Escapen der Anführungszeichen kannst Du Dir sparen wenn Du " und ' nutzt. Das kann HTML-Fragmente im Code lesbarer machen.</p>
<pre><code class="block language-js"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#elementBox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">"<div id='aepfel'>Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Und deine Einrückstrategie müsstest Du ggf. überarbeiten oder strenger beachten. Deine Eventhandler für Äpfel und Birnen sind als solche nicht zu erkennen.</p>
<p>Deswegen mein Minus. Nimms's nicht persönlich. Aber der Code ist nicht empfehlenswert. Um eine bessere Strategie empfehlen zu können, müsste man mehr darüber wissen, was eigentlich beabsichtigt ist.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731965#m1731965Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-14T13:22:36Z2018-09-14T13:23:37ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@ebody</p>
<blockquote>
<p>vielen Dank an alle.</p>
</blockquote>
<p>Wenn du die dir gegebenen Hinweise auch umsetzen würdest – <em>das</em> wäre ein Dank!</p>
<p></p>
<blockquote>
<p>So hat es bei mir jetzt funktioniert:</p>
<pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Element erstellen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>Bei <em>dir</em> hat das (vielleicht) funktioniert. Bei anderen <strong>funktioniert das nicht!</strong></p>
<p>Baust du die Seite für dich oder für andere, die sie nutzen sollen? Vermutlich letzteres; also <a href="https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731661#m1731661" rel="noopener noreferrer">so bauen, dass andere sie nutzen können</a>.</p>
<p></p>
<blockquote>
<pre><code class="block language-javascript"> <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"aepfel\">Äpfel</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">"#elementBox"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span> <span class="token string">"<div id=\"birnen\">Birnen</div>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>Es gibt einfache und doppelte Anführungszeichen. Wenn man beide einsetzt, lassen sich Escape-Orgien vermeiden.</p>
<p></p>
<blockquote>
<pre><code class="block language-javascript"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>Gibt es einen Grund, warum du jQuery einsetzt, aber es nicht verwendest? Hier speziell die Methoden <code>hide()</code>, <code>show()</code> und <code>toggle()</code>?</p>
<p>Mal abgesehen davon, dass <code>show()</code> und <code>toggle()</code> einen <a href="https://github.com/jquery/jquery/issues/4164" rel="noopener noreferrer">ziemlich üblen Bug</a> haben und die jQuery-Entwickler keine Anstalten machen, diesen zu fixen. </p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731967#m1731967ebody2018-09-14T13:27:58Z2018-09-14T13:27:58ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo Rolf,</p>
<p>konstruktives Feedback ist immer hilfreich, daher danke und kein Problem.</p>
<p>Den "Einsatzzweck" oder eher die Frage und was ich wissen möchte, habe ich in meinem 1. Beitrag beschrieben. Da es nur ein Beispielcode ist, habe ich auch nicht so auf das Einrücken u.a. geachtet. Es ging mir eher darum zu zeigen, dass das...</p>
<blockquote>
<p>Bei Klick auf #element, soll ein neues Element eingefügt werden anstelle von #element. "Element erstellen" verschwindet und "Äpfel" wird angezeigt. Jetzt soll bei einem Klick auf "Äpfel" das Element #birnen eingefügt werden.</p>
</blockquote>
<p>...jetzt funktioniert.</p>
<blockquote>
<p>Deine Eventhandler für Äpfel und Birnen sind als solche nicht zu erkennen.</p>
</blockquote>
<p>Hier bin ich mir nicht ganz sicher was du meinst. Die Eventhandler sind doch im Code:
<a href="/images/1c0f2e36-f23a-49e9-a0b7-f7e775c738a9.jpg" rel="noopener noreferrer"><img src="/images/1c0f2e36-f23a-49e9-a0b7-f7e775c738a9.jpg?size=medium" alt="Eventhandler" title="Eventhandler" loading="lazy"></a></p>
<p>Gruß
ebody</p>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731972#m1731972ebody2018-09-14T13:43:57Z2018-09-14T13:43:57ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hi,</p>
<p>das ist nur ein kleiner Beispielcode. Es ist meist so, dass ich einen größeren Code habe und sich dann Probleme/Fragen ergeben und es deutlich einfacher und übersichtlicher ist, dann ein möglichst schlankes Beispiel zu zeigen, welches das Problem/die Frage deutlich macht.</p>
<p>Ich habe Deinen Hinweis bzgl. der Verwendung von Button schon mitgenommen und so etwas ist auch hilfreich, aber ich fand es jetzt nicht notwendig den Beispielcode deswegen zu ändern.</p>
<p>Ist das kein jQuery?</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Und wenn show() und toggle() einen üblen Bug haben, ist es doch sogar besser, dass ich diesen Code verwendet habe (auch wenn ich nichts vom Bug wusste) ;-) hide(), show(), toggle() sind mir bekannt, aber für meinen gesamten Code hat css() besser gepasst.</p>
<p>Gruß
ebody</p>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731970#m1731970Rolf B2018-09-14T13:33:24Z2018-09-14T13:33:24ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo ebody,</p>
<blockquote>
<p>dass das...jetzt funktioniert.</p>
</blockquote>
<p>Ja klar. Technisch tut es das, was Du in diesem Experiment erreichen wolltest. Aber worauf wir hinauswollten, ist dies: Es ist in dieser Form nicht für das Web und seine diversen Geräte und Benutzer geeignet. Um empfehlen zu können, was besser geeignet ist, wäre die Kenntnis nützlich, auf welches Ziel Du mit deinem Experiment hinarbeitest.</p>
<p>Mit der Nichterkennbarkeit meinte ich</p>
<pre><code class="block language-js"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>versus</p>
<pre><code class="block language-js"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#element"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731971#m1731971Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-14T13:36:52Z2018-09-14T13:36:52ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@ebody</p>
<blockquote>
<p>...jetzt funktioniert.</p>
</blockquote>
<p>Nein. Solange etwas nicht mit Tastatur funktioniert, kann man nicht sagen, dass es funktioniert.</p>
<blockquote>
<p>Die Eventhandler sind doch im Code:
<a href="/images/1c0f2e36-f23a-49e9-a0b7-f7e775c738a9.jpg" rel="noopener noreferrer"><img src="/images/1c0f2e36-f23a-49e9-a0b7-f7e775c738a9.jpg?size=medium" alt="Eventhandler" title="Eventhandler" loading="lazy"></a></p>
</blockquote>
<p>Nicht, dass das übersehen wird: <code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aepfel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Äpfel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code> und <code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aepfel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Birnen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code> dürfen auch keine <code>div</code>s sein.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731974#m1731974ebody2018-09-14T14:10:42Z2018-09-14T14:10:42ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hi,</p>
<p>ich bin mir jetzt nicht ganz sicher, was Du damit meinst:</p>
<p><code>Es ist in dieser Form nicht für das Web und seine diversen Geräte und Benutzer geeignet.</code></p>
<p>Es geht einfach nur um diese Funktion. HTML Elemente hinzuzufügen und diese per Klick ein und ausblenden zu können. Ich habe es in verschiedenen Browsern und auf dem Smartphone, netbook u.a. getestet und es funktioniert.</p>
<p>Da ich keinen Mac, kein Iphone u.a. habe, kann ich es hier leider nicht testen. <strong>Oder spielst du auch auf das Thema button an und das es noch nicht ausgereift ist und man noch am Script einiges optimieren kann?</strong></p>
<p>Ich bin wirklich dankbar für die Hilfe und Hinweise hier, ich lerne sehr viel dazu und Du antwortest auch bisher immer sachlich, normal, sogar eher freundlich.</p>
<blockquote>
<p>Nicht geeignet...</p>
</blockquote>
<p>sagt aber aus, dass es nicht funktioniert, dass man befürchten muss, dass das alles Quatsch ist, was man macht und kein Nutzer meine Anwendung nutzen und bedienen könnte. Man bekommt das Gefühl und den Eindruck vermittelt, man sollte es am besten lassen.</p>
<p>So viele Webseiten und auch erfolgreiche Webseiten enthalten mit Sicherheit auch Fehler, Opimierungspotential etc. und dennoch laufen und funktionieren sie. Diese Webprogrammierer machen es einfach und wo es wäre auch schade, wenn sie es nicht machen, weil Sie Fehler machen.</p>
<p>Ich möchte einfach mal meine Meinung hier gerade sagen, weil mir das hier im Forum und im Internet generell auffällt, dass durch Antworten, deren Formulierungen, Aussagen u.a. viele abgeschreckt werden. Dabei sollte doch das Ziel sein zu helfen, zu motivieren etc.</p>
<p>Gruß
ebody</p>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731975#m1731975Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-14T14:17:05Z2018-09-14T14:17:05ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@ebody</p>
<blockquote>
<p>Ich habe Deinen Hinweis bzgl. der Verwendung von Button schon mitgenommen und so etwas ist auch hilfreich, aber ich fand es jetzt nicht notwendig den Beispielcode deswegen zu ändern.</p>
</blockquote>
<p>Naja, es wäre schön zu wissen, dass gegebene Hinweise bei dir auch ankommen.</p>
<p>Beispielcode sollte möglichst korrekt sein, weil auch andere Mitleser sich daran ein Beispiel nehmen.</p>
<p></p>
<blockquote>
<p>Ist das kein jQuery?</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#aepfel"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#birnen"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"display"</span><span class="token punctuation">,</span><span class="token string">"block"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>Kein gutes.</p>
<p>Du willst Elemente anzeigen bzw. verstecken. <code>hide()</code>, <code>show()</code>, <code>toggle()</code> sind <strong>sprechende Namen</strong> dafür.</p>
<blockquote>
<p>Und wenn show() und toggle() einen üblen Bug haben, ist es doch sogar besser, dass ich diesen Code verwendet habe</p>
</blockquote>
<p>Nein. Dein Code hat denselben Bug.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731978#m1731978Rolf B2018-09-14T14:52:55Z2018-09-14T14:59:29ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo ebody,</p>
<p>ja, es ging um das click auf einem nicht interaktiven Element. Das ist und bleibt ungeeignet. Weil es NUR Maus-/Touchbedienbar ist. Es gibt aber noch andere Bedientechniken. SelfHtml hat Bedienbarkeit relativ hoch auf der Prioritätenliste, eben WEIL viele nicht wissen oder nicht glauben wollen, wie wichtig das ist. Darum reiben wir das mit der Drahtbürste ein, wenn es nötig ist. Aber wenn die Bedienung für den eigentlichen Anwendungszweck ohnehin anders läuft, dann ignoriere meinen Einwand.</p>
<p>Das Minus am Beitrag bleibt trotzdem, als Etikett für unvorbereitete Leser aus den Weiten des Web. Da Du anonym hier bist, tut's ja nicht weh </p>
<p>Gunnars Bug-Hinweis bezieht sich auf den Umstand, dass jQuery show/hide das relativ neue hidden-Attribut von HTML nicht beachtet. Wenn Du dieses Attribut nicht nutzt, ist dieser Hinweis ebenfalls nicht relevant.</p>
<p>Aber, einfach um mal einen anderen Ansatz zu zeigen, das direkte Manipulieren von Sichtbarkeiten ist nicht immer die beste Lösung. Es ist auch unklar, weshalb Du die Elemente für Äpfel und Birnen erst im JS hinzufügst und nicht direkt im HTML vorsiehst. Solange es nur zwei Elemente sind, geht es auch so, plus Bedienbarkeit, und mit mehr CSS als JS Magic:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Klickeritis-Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>elementBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Element erstellen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>äpfel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Äpfel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birnen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Birnen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<pre><code class="block language-css"><span class="token selector">#elementBox:not(.clicked) :not(#element),
#elementBox.clicked #element,
#elementBox.clicked.äpfel :not(#äpfel),
#elementBox.clicked:not(.äpfel) #äpfel</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#elementBox button</span> <span class="token punctuation">{</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token property">font</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">focusVisibleElementInBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#elementBox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"clicked"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">"äpfel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">focusVisibleElementInBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">focusVisibleElementInBox</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#elementBox button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token string">":visible"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Das JS setzt nach eine Klasse clicked auf die elementBox (nur einmal, dafür sorgt jQuery bzw. die classList des DOM), und schaltet die Klasse äpfel hin und her (Ja, <code>äpfel</code>. Die Jahre des geschienten Alphabets sind auch in CSS vorüber. Nur der CSS Highlighter im Forum weiß das nicht).</p>
<p>Das CSS prüft die 4 Fälle, in denen ein Element auszublenden ist, und setzt dafür display:none. Das ist besser als es andersrum mit display:block zu machen, weil es eine MENGE Varianten geben, welchen display-Wert ein sichtbares Element hat.</p>
<ul>
<li>Elementbox nicht geklickt, alles darin außer #element</li>
<li>Elementbox geklickt, darin das #element Element</li>
<li>Geklickt plus äpfel-Klasse, darin alles was nicht #äpfel ist</li>
<li>Geklickt ohne äpfel-Klasse, darin alles was #äpfel ist</li>
</ul>
<p>Und es sind jetzt Buttons. Sie sehen nur nicht wie Buttons aus. Das einzig verräterische ist der Outline-Rahmen drumherum, der das Element mit dem Fokus anzeigt. Das KÖNNTE man mit der outline-Eigenschaft im CSS abschalten, aber das stört die Bedienbarkeit. Dieser visuelle Bug ist ein FEATURE!</p>
<p>Ob dieses Konstrukt für deinen realen Anwendungsfall taugt ist natürlich eine andere Frage. Den kennen wir ja nicht </p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731976#m1731976Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2018-09-14T14:25:12Z2018-09-14T14:25:12ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p>Nein. Dein Code hat denselben Bug.</p>
</blockquote>
<p>Lass ihn doch nicht raten …</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731977#m1731977Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-14T14:44:24Z2018-09-14T14:44:24ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@Matthias Apsel</p>
<blockquote>
<blockquote>
<p>Nein. Dein Code hat denselben Bug.</p>
</blockquote>
<p>Lass ihn doch nicht raten …</p>
</blockquote>
<p>Welches Rätsel hinterlässt meine Bug-Beschreibung?</p>
<p>Ein Element, das sichtbar gemacht werden soll, darf nicht mehr das Attribut <code>hidden</code> haben.</p>
<p>Sonst wird es auch u.U. gar nicht sichbar, wenn man <code>.show()</code> (oder <code>.css("display","block")</code>) darauf anwendet.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731979#m1731979Rolf B2018-09-14T15:03:17Z2018-09-14T15:03:17ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo Gunnar,</p>
<p><a href="https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731978#m1731978" rel="noopener noreferrer">Ich hab's ihm ja schon gesteckt...</a></p>
<p>Und wenn Matthias schon keine Lust hatte, deinem Link zu folgen - dann hatte ebody die bestimmt auch nicht </p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731981#m1731981Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-14T15:14:59Z2018-09-14T15:14:59ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@Rolf B</p>
<blockquote>
<p>Und es sind jetzt Buttons.</p>
</blockquote>
<p>Und wenn denn die Buttons noch <code>aria-expanded</code>-Attribute trügen …</p>
<p>☞ Inclusive Components: <a href="https://inclusive-components.design/collapsible-sections/" rel="noopener noreferrer">Collapsible Sections</a>
</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1732015#m1732015dedlfix2018-09-15T12:41:39Z2018-09-15T12:41:39ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Tach!</p>
<blockquote>
<p>SelfHtml hat Bedienbarkeit relativ hoch auf der Prioritätenliste, eben WEIL viele nicht wissen oder nicht glauben wollen, wie wichtig das ist. Darum reiben wir das mit der Drahtbürste ein, wenn es nötig ist.</p>
</blockquote>
<p>Das Problem daran ist, dass die Drahtbürste wehtut. Da wir aber keine Vorgesetzten der Probleminhaber sind, können wir nur Vorschläge geben und keine Anweisungen. Vorschläge sollten aber nicht wehtun, damit sie bereitwillig angenommen werden. Deswegen sähe ich lieber eine hautverträgliche Emulsion zur Anwendung kommen als eine Drahtbürste.</p>
<p>dedlfix.</p>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1731983#m1731983Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2018-09-14T15:43:24Z2018-09-14T15:43:24ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Hallo Rolf B,</p>
<blockquote>
<p>Und wenn Matthias schon keine Lust hatte, deinem Link zu folgen - dann hatte ebody die bestimmt auch nicht </p>
</blockquote>
<p>Vor allem hatte ich keine Veranlassung. Ich wusste ja, was Gunnar meint.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1732018#m1732018Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-09-15T12:45:30Z2018-09-15T12:45:30ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>@@dedlfix</p>
<blockquote>
<p>Deswegen sähe ich lieber eine hautverträgliche Emulsion zur Anwendung kommen als eine Drahtbürste.</p>
</blockquote>
<p>Wäre schön, wenn du diese nicht nur gern zur Anwendung kommen sähest, sondern sie auch zu diesem Zwecke selbst austeiltest, damit das nicht immer an mir hängenbleibt.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/sep/12/jquery-klick-auf-dynamisch-erstellte-elemente-funktioniert-nicht/1732019#m1732019dedlfix2018-09-15T12:53:49Z2018-09-15T12:53:49ZjQuery - klick auf dynamisch erstellte Elemente funktioniert nicht<p>Tach!</p>
<blockquote>
<blockquote>
<p>Deswegen sähe ich lieber eine hautverträgliche Emulsion zur Anwendung kommen als eine Drahtbürste.</p>
</blockquote>
<p>Wäre schön, wenn du diese nicht nur gern zur Anwendung kommen sähest, sondern sie auch zu diesem Zwecke selbst austeiltest, damit das nicht immer an mir hängenbleibt.</p>
</blockquote>
<p>Tja, manchmal schaue ich da nicht so genau hin. Aber da fällt mir einen deiner Grundsätze ein, dass man das Frontend den Frontendexperten überlassen sollte. Also Arbeitsteilung oder All-in-one-Einzelkämpfer? </p>
<p>dedlfix.</p>