jQuery - klick auf dynamisch erstellte Elemente funktioniert nicht

[ebody]

Hallo,

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

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.

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

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

Gruß ebody

<div id="elementBox">
  <div id="element">Element erstellen</div>
</div>

$(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>");
  });

});