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:

function bindButtonClick(){
    $('.myButton').click(function(){
        // on click code
    });
}

function updateContent(){
    $('#result').load('ajax_endpoint.html', function() {
         // wir müssen den Button wieder mit dem Click-Event verbinden
         bindButtonClick();
    });
}

• 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):

$(document).ready(function(){
    $('body').on('click','.myButton',function(){
         // on click code
    });
});

function updateContent(){
    // Hier können wir auf eine weiteres bind verzichten
    $('#result').load('ajax_endpoint.html');
}

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.