jQuery - klick auf dynamisch erstellte Elemente funktioniert nicht

[Auge]

Hallo

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.

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

In der Tat. Zu dem Zeitpunkt, an dem ready feuert, existieren die Elemente #aepfel und #birnen nicht.

$(document).ready(function() {
  
  $("#element").click(function(){
    $( "#elementBox" ).html( "<div id=\"aepfel\">Äpfel</div>");
    $("#aepfel").click(function(){
      $( "#elementBox" ).html( "<div id=\"birnen\">Birnen</div>");
      $("#birnen").click(function(){
        $( "#elementBox" ).html( "<div id=\"aepfel\">Äpfel</div>");
      });
    });
  });
});

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.

Tschö, Auge