jQuery .click函数无法处理<td>标签？

Question

所以我正在使用Javascript和jQuery创建一个表,我想要它,这样当你点击表格第一行的td时,那个列中其余的td就会下拉.让我试着通过展示我的代码来解释它.这是我的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
    }
}

这基本上创建了td,每个td类似于这种格式

<td class="rowh columni">

我想要它,以便除了.row0中的td之外都隐藏所有td,如果你点击.row0 .columni中的td,那么.columni中的所有td都会出现.参数'heights'是一个数组,例如,它可以是

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

并且它将使用这些单词创建一个表,headerOne和headerTwo将在第一行中,someTd和anotherTd将在第二行中.

现在,当我尝试添加这样的点击功能时

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

然后在我的document.ready函数中调用它

$(document).ready( function() {

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

当我点击一个td时它什么也没做.怎么会？

Answer 1

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

因为您在创建DOM之后创建元素.使用"on"选择器可以获得动态创建的精确元素.

从URL:

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

Answer 2

试试这样:

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