jQuery .click 函数不适用于 <td >标签? [英] jQuery .click function not working on < td > tag?

问题描述

所以我正在使用 Javascript 和 jQuery 创建一个表格，我希望这样当您单击表格第一行上的 td 时，该列中的其余 td 会下拉.让我尝试通过展示我的代码来解释它.这是我的 Javascript:

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
    }
}

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

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

<td class="rowh columni">

我希望它隐藏所有 td，除了 .row0 中的 td，如果您单击 .row0 .columni 中的 td，则 .columni 中的所有 td 都会出现.参数'heights'只是一个数组，例如，它可以是

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'],];

它会使用这些词创建一个表格，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');
    });
}

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

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

$(document).ready( function() {

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

当我点击一个 td 时它不会做任何事情.怎么来的?

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

推荐答案

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

因为您是在创建 DOM 之后创建元素.使用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.

来自网址:

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

这篇关于jQuery .click 函数不适用于 <td >标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！