wake-up-neo.com

Das Click-Ereignis wird nicht für dynamisch hinzugefügte Tabellenzeilen ausgelöst

Ich habe eine leere Tabelle, zu der ich Zeilen mit jQuery hinzufüge.

$('#table > tbody:last').append('<tr id="' + symbol.Code1 + '"><td>' + symbol.Code1 + '</td><td>' + symbol.Code2+ '</td><td>' + symbol.Code3+ '</td></tr>');

Alles ist in Ordnung, aber wenn ich implementiere:

$("#table tr").click(function(e) {
    alert(this.id);
});

nichts passiert.

15
user1770849

Sie benötigen Ereignisdelegierung Sie können EIN verwenden, um das click-Ereignis für dynamisch hinzugefügte Elemente zu binden. Die Art und Weise, wie Sie mit click verbinden, gilt für vorhandene Elemente, nicht jedoch für Elemente, die später hinzugefügt werden.

$(document).on("click", "#table tr", function(e) {
    alert(this.id);
});

Sie können den Gültigkeitsbereich für on einschränken, indem Sie den nächstgelegenen übergeordneten Selektor entweder nach der ID oder nach der Klasse des übergeordneten Elements angeben.

$('.ParentElementClass').on("click", "#table tr", function(e) {
    alert(this.id);
});

DELEGIERTE EREIGNISSE

Delegierte Ereignisse haben den Vorteil, dass sie Ereignisse von Nachkommenelementen verarbeiten können, die zu einem späteren Zeitpunkt dem Dokument hinzugefügt werden. Wenn Sie Ein Element auswählen, das zum Zeitpunkt der Zuordnung des delegierten Ereignishandlers Garantiert vorhanden ist, können Sie delegierte Ereignisse verwenden, um Das häufige Anhängen und Entfernen von Ereignissen zu vermeiden Handler.

30
Adil

Sie müssen die .on-Methode verwenden

$("#table").on('click','tr',function(e) { 
    alert($(this).attr('id')); 
}); 
8
Matei Mihai

Sie fügen Zeilen dynamisch hinzu, nachdem Sie das Ereignis an die vorhandenen -Eins gebunden haben. Sie können delegierte Ereignismethode verwenden, um das Problem zu beheben:

$("#table").on("click", "tr", function(e) {
    alert(this.id);
});
1
VisioN
$(document).on('click', "#tbl-body tr td", function(e) { 
    alert(this.id);
});
0