javascript - jQuery .click function not working on < td > tag?

Question

So I am creating a table using Javascript and jQuery, and I want it so that when you click the td's on the first row of the table, then the rest of the td's in that column drop down. Let me try to explain it by showing my code. Here is my 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
    }
}

This basically creates td's and each td is similar to this format

<td class="rowh columni">

I want it so that all td's are hidden except for the td's in .row0 and if you click the td in .row0 .columni, then all td's in .columni appear. The parameter 'heights' is jsut an array, for example, it can be

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

and it would create a table using those words, headerOne and headerTwo would be in the first row, someTd and anotherTd would be in the second row.

Now, when I try to add a click function like so

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

and then call it in my document.ready function like so

$(document).ready( function() {

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

it doesn't do anything when I click a td. How come?

Answer 1

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

Since you are creating the elements after the DOM has been created. Use the "on" selector to get the precise element that is dynamically created.

From the URL:

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