Event Handler für noch nicht existierende Elemente in JQuery

erstellt am: 20.05.2016 | Kategorien: Webentwicklung | Schlagworte: Javascript • Jquery

s kommt manchmal vor, dass man ein Element mit Jquery einfügt und einen Eventhandler dafür registrieren will. Ab JQuery 1.7+ geht das mit der on() Methode. Für Elemente die noch nicht existieren muss man den Event-Delegation Ansatz der Methode on() nutzen.

Der normale direkte Aufruf sieht wie folgt aus (und funktioniert nicht für Elemente, die erst später eingefügt werden):

$( "#myElement" ).on( "click", function() {
  console.log( $( this ).text() );
});
$('body').append('
Hello World
');

Mit Event-Delegation gibt man den Selektor als Parameter mit und wählt als Selektor für das JQuery-Objekt ein Container-Element, das sicher existiert, wenn das Skript ausgeführt wird (z.B. document, head oder body):

$( 'body' ).on( "click", "#myElement", function() {
  console.log( $( this ).text() );
});
$('body').append('
Hello World
');

Als erster einen Kommentar schreiben.