L'événement de clic ne se déclenche pas pour les lignes de table ajoutées dynamiquement

Question

J'ai une table vide à laquelle j'ajoute des lignes via jQuery en utilisant:

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

Tout va bien mais quand j'implémente:

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

rien ne se passe.

Answer 1

Vous avez besoin de délégation d'événements vous pouvez utiliseronpour lier l'événement click aux éléments ajoutés dynamiquement. La façon dont vous liez avec click s'appliquera à l'élément existant mais pas aux éléments ajoutés ultérieurement.

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

Vous pouvez limiter la portée de on en donnant le sélecteur parent le plus proche, soit par identifiant, soit par classe de parent.

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

Événements délégués

Les événements délégués ont l'avantage de pouvoir traiter les événements de Éléments descendants ajoutés au document ultérieurement. En choisissant Un élément dont la présence est garantie au moment où le gestionnaire d'événements délégué Est attaché, vous pouvez utiliser des événements délégués pour éviter que Associe et supprime fréquemment l'événement. manutentionnaires.

Answer 2

Vous devez utiliser la méthode .on

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

Answer 3

Vous ajoutez des lignes de manière dynamique après avoir lié l'événement aux existants ones. Vous pouvez utiliser l'approche des événements délégués pour résoudre le problème:

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

Answer 4

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