web-dev-qa-db-fra.com

la fonction jQuery .click ne fonctionne pas sur la balise <td>?

Donc, je crée une table en utilisant Javascript et jQuery, et je le veux pour que lorsque vous cliquez sur les td de la première ligne de la table, le reste de la td de cette colonne soit déroulé. Laissez-moi essayer de l'expliquer en montrant mon code. Voici mon Javascript: 

function createTr (heights) { //heights is just an array of words
    for (var h=0; h<heights.length; h++) { 
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { 
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
    }
}

Cela crée essentiellement des td et chaque td est similaire à ce format

<td class="rowh columni">

Je le veux pour que tous les td soient masqués à l'exception des td dans .row0 et si vous cliquez sur le td dans .row0. Columni, tous les td dans .columni apparaissent. Le paramètre 'hauteurs' est juste un tableau, par exemple, il peut être

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

et il créerait une table en utilisant ces mots, headerOne et headerTwo seraient dans la première ligne, someTd et anotherTd seraient dans la deuxième ligne.

Maintenant, quand j'essaie d'ajouter une fonction de clic comme si

function animation() {
    $('td').click( function() {
        alert('clicked');
    });
}

puis appelez-le dans ma fonction document.ready comme si 

$(document).ready( function() {

    createTr(heights);
    animation();
});

il ne fait rien quand je clique sur un td. Comment venir?

javascriptjqueryhtmlhtml-tablejquery-click-event
24
user2719875

http://api.jquery.com/on/

Depuis que vous créez les éléments après la création du DOM. Utilisez le sélecteur "on" pour obtenir l’élément précis créé dynamiquement.

De l'URL:

   $("#newTable").on("click", "td", function() {
     alert($( this ).text());
   });
41
Churchill

Essayez comme ça:

$('body').on('click','td', function() {
        alert('clicked');
    });
5
Ankit Tyagi

essaye ça

function animation() {
    $(document).on('click','td',function() {
    alert('clicked');
    });
}
1
Anto Subash

J'aime ça.-

 $("#table tr").click(function(){
    console.log(this);
});
0
Delmirio Segura

Ce code fonctionne très bien:

$(document).ready(function(){
    $("td").click(function(){
        if(this.title!=""){
            alert(this.title);
        }
    });
});
0
user2912275