Cliquez sur événement n'a pas de feu pour les lignes de la table ajoutés dynamiquement

J'ai une table vide à laquelle je suis en ajoutant les 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 est OK mais quand je mettre en œuvre:

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

rien ne se passe.

OriginalL'auteur user1770849 | 2012-10-24

  1. 30

    Vous avez besoin événement délégation vous pouvez utiliser sur de lier l'événement de clic pour ajouter dynamiquement des éléments. La façon dont vous êtes en liaison avec sur a appliquer sur l'élément existant mais pas les éléments qui sont ajoutés par la suite.

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

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

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

    Délégué événements

    Délégué événements ont l'avantage qu'ils peuvent traiter les événements de
    descendant des éléments qui sont ajoutés au document à une date ultérieure. Par
    cueillette à un élément qui est garanti pour être présent au moment de l'
    délégué du gestionnaire d'événement est raccordé, vous pouvez utiliser délégué événements
    éviter de recourir fréquemment à installer et à enlever les gestionnaires d'événements.

    FWIW, je ne recommande pas d'utiliser document ou body en tant que parent sélecteur, car il rend l'événement de réaction plus lent. Il est préférable d'utiliser le plus proche statique parent.
    Merci @VisioN, de la mise à jour de ma réponse à votre suggession.
    Merci pour la réponse. J'ai passé des heures à me gratter la tête à propos de problème similaire
    ENFIN, quelqu'un a répondu à la question que je cherchais. J'ai eu exactement le même problème.
    ne peut pas comprendre pourquoi il ne fonctionne pas pour moi

    OriginalL'auteur Adil

  2. 8

    Vous devez utiliser le .on méthode

    $("#table").on('click','tr',function(e) { 
    alert($(this).attr('id')); 
});
    Je pense que c'est une meilleure réponse que l'on a accepté, comme il verrouille le plus proche statique parent comme @VisioN a mentionné.

    OriginalL'auteur Matei Mihai

  3. 1

    Vous ajoutez des lignes dynamiquement après avoir lié l'événement à la existant. Vous pouvez utiliser délégué de l'événement approche pour résoudre le problème:

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

    OriginalL'auteur VisioN

  4. 0
    $(document).on('click', "#tbl-body tr td", function(e) { 
    alert(this.id);
});
    Alors que ce bout de code est la bienvenue, et peut fournir de l'aide, il serait grandement améliorée si elle comprenait une explication de la comment, il traite de la question. Sans cela, votre réponse a beaucoup moins de valeur éducative - rappelez-vous que vous répondez à la question pour les lecteurs dans l'avenir, et pas seulement la personne qui vous demande maintenant! Veuillez modifier votre réponse pour ajouter des explications, et de donner une indication de ce que les limites et les hypothèses s'appliquent.

    OriginalL'auteur khalid khuz nain