Ein klassisches Problem, wenn man HTML Elemente dynamisch durch die HTML-Response eines AJAX Calls ersetzt, ist, dass danach die auf diesen Elementen gebundenen Listener nicht mehr gebunden sind. Das liegt natürlich in der Natur der Sache und führt sehr häufig zu komplexem und schwer zu wartbaren Code, der die Listener im Success-Callback neu bindet.
Für dieses Problem gibt es eine einfache und elegante Lösung, die aber recht oft übersehen wird. Mit einem dritten Argument in der .on()-Function und dem initialen Selektor auf ‚document‘, wird der Listener auch weiterhin gebunden sein, wenn der entsprechende HTML darunter durch ein .html(‚…‘) ersetzt wird.
$(document).on('click', '.your-css-selector', function(event){
// ... your code here.
});
Sehr einfach und auch sehr praktisch.
