Question

我想在每行的第一个单元格上单击tabes来创建一个函数。这是使用插件构建的表，此方法不起作用

$('#ecoTableTotal').find('tr').find('td').eq(0).click(function(){
    console.log('click');
})

这个工作正常，但我需要这个才能点击第一个单元格。这可能吗？

 $('#ecoTableTotal').on('click', 'tr' , function (event) {
        console.log('click');
    });

编辑：表是使用Bootstrap表（http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html）生成的。 This question也与点击功能存在同样的问题。

Answer 1

使用:first-of-type选择器：http://api.jquery.com/first-of-type-selector/

<强> jsBin demo

正如其他地方所建议的，:first-child 无效

它不会定位i元素（根据您的请求），它实际上是第一个出现的i。即：如果在i元素之前，您有<br>或<b>bold</b>而不是i:first-child 不再是第一个孩子！

从你的评论中可以看出你的TR是动态创建的，所以也喜欢

$('#ecoTableTotal').on("click", "tr td:first-of-type i:first-of-type", function(){
   console.log('click');
});

有关如何使用的更多信息：use .on() with event delegation。

要恢复，您可以使用以下两种变体：

"tr td:first-of-type i:first-of-type"

或

"tr td:first-child i:first-of-type"
// TD is always the first inside a valid TABLE TR so only here we can use 
// first-child, but there's no guarantee that a contextual <i> element is not 
// preceded by some other HTML element tag.

Answer 2

选择器＆gt;表示您只对直接子元素感兴趣，它有助于定义选择器的deph。

$('#ecoTableTotal').on('click', 'tbody > tr > td:first' , function (event) {
        console.log('click');
});

Answer 3

$('#ecoTableTotal').on('click', 'tr td:first-child' , function (event) {
    console.log('click');
});

修改

$('#ecoTableTotal').on('click', 'tr td:eq(0)' , function (event) { console.log('click'); });

修改

$('#ecoTableTotal').on('click', 'tr td:eq(0) i:eq(0)' , function (event) { console.log('click'); });

单击表格单元格上的功能

3 个答案: