jQuery - klick auf dynamisch erstellte Elemente funktioniert nicht

[dedlfix]

Tach!

https://codepen.io/anon/pen/QVrWBV

Bei Klick auf #element, soll ein neues Element eingefügt werden anstelle von #element.

Dann musst du das aber auch so tun. Der Code fügt stattdessen ein Kind-Element in #element ein.

"Element erstellen" verschwindet und "Äpfel" wird angezeigt.

Der Textnode in #element wird ausgetauscht durch das #aepfel-Element.

Jetzt soll bei einem Klick auf "Äpfel" das Element #birnen eingefügt werden. Das passiert aber nicht.

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.

Das Click-Event gelangt deshalb aufgrund des Bubbling weiter nach oben zum #element und das ersetzt seinen Inhalt mit dem #aepfel.

1. Weil das DOM das Element #aepfel nicht kennt?

Das kannst du selbst prüfen, wenn du die Entwicklertools des Browsers verwendest. Da sieht man aber auch, dass kein Event registriert ist.

2. Muss man für so etwas wirklich etwas wie MutationObserver verwenden?

Nö, man muss es nur richtig machen. Besonders die zeitliche Reihenfolge, wann man was zur Verfügung hat und auch erst dann bearbeiten kann.

dedlfix.