Event Listener für PHP erzteugte Elemente

Schmakus · 11. Juni 2015

Hi,

ich habe das Problem, dass bei PHP erzeugten Elementen (AJAX Call) der Event Listener nicht funktioniert.
Also ich hol mir via Ajax eine aufbereitete Liste, welche auch Buttons enthällt. Diese Buttons haben die Klasse ".close".

Mein Listener sieht so aus.

JavaScript

$('.close').on('click', function(e){  
   clear_shoutbox(this);
});

Nun habe ich festgestellt, dass wenn ich den Listerner in die Success-Funktion des Ajax Calls einbaue, funktioniert er. Wenn jedoch eine andere Funktion z.B. ein Refresh der Liste durchführt gehts wieder nicht.
D.h. ich muss in alle Funktionen diesen Listener einbauen.
Ich weiß, der Ajax ist asyncron, somit hört der Listerner auf ein Elemt, welches es noch nicht gibt.

Gibt es nicht eine andere, komfortablere Lösung? Z.B. Wenn Liste ".nachrichten" vorhanden, dann .....

Grüße
Schmakus

lauras · 11. Juni 2015

Du kannst den Listener auf ein Parent-Element legen, welches es zum Zeitpunkt des Listener-Setzens schon gibt, und dann in der on-Methode den genauen Selektor spezifizieren. Kombiniert mit deiner .nachrichten-Liste koennte das ca. so aussehen (vorausgesetzt alle .close die das betrifft liegen innerhalb von .nachrichten):

JavaScript

var $nachrichten = $('.nachrichten');
if ($nachrichten.length) {
    $nachrichten.on('click', '.close', function(e){  
        clear_shoutbox(this);
    });
}

wolf · 11. Juni 2015

Alternativ könntest du den listener in eine Funktion packen, die du nach dem AJAX aufrufst..

Event Listener für PHP erzteugte Elemente

Jetzt mitmachen!

Teilen