Ich muss zugeben, ich hatte öfter das Problem, Elemente auf einer Webseite mit jQuery anzusprechen, die nachträglich via Ajax oder .append() dem DOM hinzugefügt wurden. Höchstwahrscheinlich bin ich auch der Letzte, der die ideale Lösung wohl nicht kannte, obwohl es bereits seit 2011 möglich und bekannt ist.
Normale DOM Elemente mit Click-Handler behandeln:
1 2 3 | $(document).ready(function() { $('#selector').click(function() { alert('test'); }); }); |
Das geht solange gut, wie alle Elemente schon im DOM vorhanden sind, kommt aber etwas nachträglich hinzu, zum Beispiel nachgeladen durch Ajax, dann kennt der Click-Handler den Selektor noch nicht und dann kann man auf das Element klicken wie man möchte, es wird nichts passieren. Es wird nicht mal eine Fehlermeldung ausgegeben, weil es keinen Fehler gibt.
Jetzt endlich, bin ich über eine gute Lösung für das Problem gestolpert.
Nachträgliche, dem DOM hinzugefügte Elemente, mit Click-Handler behandeln:
1 2 3 | $(document).ready(function() { $(document).on('click', '#selector', function() { alert('test'); }); }); |
In diesem Fall wird das neue Element in jedem Fall gefunden. Das ganze bedeutet natürlich auch, dass in diesem Beispiel der gesamte DOM einer Seite durchlaufen wird, bis der gewünschte Selektor gefunden wird, wegen $(document).on().
Aus Performancegründen wäre vielleicht die Wahl eines vorhanden, näher an dem neuen Element liegender Container, die bessere Wahl, solange dieser bereits vorhanden ist. Das sollte aber nicht wirklich ein Problem sein 😉
