javascript - 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">

我想要它，以便隐藏所有 td，除了 .row0 中的 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”选择器获取动态创建的精确元素。

来自网址:

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