Event-Handler auch nach Ajax-Call weiterhin gesetzt lassen

Hat man in einem Szenario eine Webseite mit Teilen, welche über Ajax-Calls aktualisiert werden, gehen die zu den neu geladenen Elementen verbundenen Events verloren.

Um dies zu verhindern, gibt es 2 Möglichkeiten:

  • Nach erfolgreichem Ajax-Call verbindet man Elemente wieder mit den Events:

  • Oder der elegantere Weg: mit jQuery´s on() Methode ist es möglich, Event-Handler an Elemente zu binden, welche nie von der Seite genommen werden (z.B. den Body):

Damit bindet man den Event-Code an das Body-Element und teilt diesem mit, immer dann zu feuern wenn das Zielelement (2. Argument, ‚.myButton‘) einen bestimmten Event erfährt (1. Argument, ‚click‘), also auch unabhängig davon ob das Zielelement neu geladen wurde oder nicht.