jQuery .click 函数在 < td > 标签上不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19641188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .click function not working on < td > tag?
提问by user2719875
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:
所以我正在使用 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
}
}
This basically creates td's and each td is similar to this format
这基本上创建了 td 并且每个 td 都类似于这种格式
<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
我希望它隐藏所有 td，除了 .row0 中的 td，如果您单击 .row0 .columni 中的 td，则 .columni 中的所有 td 都会出现。参数 'heights' 只是一个数组，例如，它可以是
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.
它将使用这些词创建一个表，headerOne 和 headerTwo 将在第一行， someTd 和 anotherTd 将在第二行。
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 函数中调用它
$(document).ready( function() {
createTr(heights);
animation();
});
it doesn't do anything when I click a td. How come?
当我单击 td 时它什么也不做。怎么来的？
回答by Churchill
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.
由于您是在创建 DOM 之后创建元素。使用“on”选择器获取动态创建的精确元素。
From the URL:
从网址：
$("#newTable").on("click", "td", function() {
alert($( this ).text());
});
回答by Ankit Tyagi
Try like this :
像这样尝试：
$('body').on('click','td', function() {
alert('clicked');
});
回答by Anto Subash
try this
尝试这个
function animation() {
$(document).on('click','td',function() {
alert('clicked');
});
}
回答by Delmirio Segura
I like this.-
我喜欢这个。-
$("#table tr").click(function(){
console.log(this);
});
回答by user2912275
This code works just fine:
这段代码工作得很好：
$(document).ready(function(){
$("td").click(function(){
if(this.title!=""){
alert(this.title);
}
});
});
回答by zamoldar
use this to catchs click events for spesifc tr and td;
使用它来捕获特定的 tr 和 td 的点击事件；
$('#table_id').on('click', 'tr.statusP td:first-child', function () {
alert('clicked');
});
