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

问题描述

所以我使用Javascript和jQuery创建一个表格，并且我希望它能够在您单击表格第一行上的td时，该列中其余的td下拉。让我试着通过显示我的代码来解释它。这里是我的Javascript：

  function createTr（heights）{// heights只是一个单词数组
 for var h = 0; 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'>到用html 
} 
} 
  

写成的表格（#newTable）

这基本上创建了td，而每个td与此格式类似。

 < td class =rowh columni> 
  

我希望它所有td都是隐藏的，除了.row0中的td之外，并且如果您单击td in .row0 .columni，然后所有的td在.columni出现。例如，它可以是

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

，它会使用这些单词创建一个表，headerOne和headerTwo将位于第一行，someTd而另一个TD就在第二行。

现在，当我尝试添加一个点击函数时，像这样

<$ （）{
alert（'clicked'）;
}）;
}

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

$ b $

  $（document）.ready（function（）{
 
 createTr（heights）; 
 animation（ ）; 
}）; 
  

当我点击td时，它不会执行任何操作。

解决方案

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

由于您在创建DOM后创建元素，

来自网址： $（$（this）.text（））; $ b $（＃c $ c> $（＃newTable）。 b}）;

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?

解决方案

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());
   });

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