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.
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 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.
Sie müssen die .on-Methode verwenden
$("#table").on('click','tr',function(e) {
alert($(this).attr('id'));
});
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);
});
$(document).on('click', "#tbl-body tr td", function(e) {
alert(this.id);
});