jQuery - klick auf dynamisch erstellte Elemente funktioniert nicht

[Rolf B]

Hallo ebody,

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.

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 😂

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.

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:

<h1>Klickeritis-Test</h1>
<div id="elementBox">
   <button type="button" id="element">Element erstellen</button>
   <button type="button" id="äpfel">Äpfel</button>
   <button type="button" id="birnen">Birnen</button>
</div>

#elementBox:not(.clicked) :not(#element),
#elementBox.clicked #element,
#elementBox.clicked.äpfel :not(#äpfel),
#elementBox.clicked:not(.äpfel) #äpfel {
  display:none;
}

#elementBox button {
  border: none;
  background-color: transparent;
  font: inherit;
}

$(function() {
   focusVisibleElementInBox();

   $("#elementBox").click(function() {
      $(this).addClass("clicked").toggleClass("äpfel");
      focusVisibleElementInBox();
   });
});

function focusVisibleElementInBox() {
   $("#elementBox button").filter(":visible").focus();
}

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, äpfel. Die Jahre des geschienten Alphabets sind auch in CSS vorüber. Nur der CSS Highlighter im Forum weiß das nicht).

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.

• Elementbox nicht geklickt, alles darin außer #element
• Elementbox geklickt, darin das #element Element
• Geklickt plus äpfel-Klasse, darin alles was nicht #äpfel ist
• Geklickt ohne äpfel-Klasse, darin alles was #äpfel ist

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!

Ob dieses Konstrukt für deinen realen Anwendungsfall taugt ist natürlich eine andere Frage. Den kennen wir ja nicht 😀

Rolf