nicht angemeldet
Hallo,
$( "#container .itemh1" ).append( '<div class="close">X</div>' );
$( ".close" ).click(function() { … });
>
> Bis hier hin funktioniert alles noch wunderbar, doch wen ich die close klasse irgentwo einfüge tut sich da nix.
Das ist logisch.
`$('CSS-Selektor')`{:.language-javascript} durchsucht das Dokument nach Elementen anhand des gegebenen Selektors. Es stellt also eine Liste von Elementen zusammen, die sich \*zu diesem Zeitpunkt\* im Dokument befinden. (Ein jQuery-Objekt ist eine spezielle Liste mit DOM-Elementen.)
Mit `$('.close').click(…)`{:.language-javascript} registrierst du einen Event-Handler an eben diesen gefundenen Elementen. Das betrifft \*nicht\* Elemente, die sich \*zukünftig\* im DOM befinden werden.
Das Problem lässt sich mit [Event Delegation](http://molily.de/js/event-handling-effizient.html) lösen. Dabei registrierst du einen Event-Handler bei einem gemeinsamen Elternelement und nutzt aus, dass die Events vom Zielelement im DOM-Baum nach oben aufsteigen (genannt [Event-Bubbling](http://molily.de/js/event-handling-objekt.html#bubbling)).
Das geht in jQuery etwa so:
~~~javascript
$(document.body).on('click', '.close', function() {
// …
});
Das heißt soviel wie:
Überwache alle Klick-Ereignise zentral beim body-Element. Wenn ein Element innerhalb von body geklickt wurde, auf das der Selektor ».close« zutrifft, so rufe die Handler-Funktion auf.
Da sich das body-Element (hoffentlich) die ganze Zeit im Dokument befindet, betrifft dieses Event-Handling alle Elemente, auf die der Selektor zutrifft. Egal, ob sie sich bereits im DOM befinden oder erst zukünftig eingefügt werden.
Anstatt von document.body kannst du natürlich ein passenderes Elternelement verwenden, falls du nicht dokumentweit Klicks überwachen möchtest. Siehe auch die jQuery-Referenz zu on().
Der Vorteil von Event-Delegation ist, dass nicht bei jedem Element, bei dem der Event passieren kann, einzeln ein Handler registriert werden muss.
Grüße,
Mathias
Matthias Apsel