Question

我一直在使用我在这里找到的jQuery脚本，点击它们时突出显示/取消显示表格中的行。脚本是：

$(".clickable-row").click(function(){
if($(this).hasClass('row-highlight'))
    $(this).removeClass('row-highlight');
else
    $(this).addClass('row-highlight').siblings().removeClass('row-highlight');

}

我表格中的所有行都有一个可点击行的类。

这对我来说一直很好，直到我引入了一个表，当用户单击按钮时动态添加了行。在该表中，动态添加的行不会突出显示。

我不是一个jquery专家，但经过一些研究后我发现通过使用事件委托，动态添加的行应该是可点击的，所以我把我的脚本改为：

$(".clickable-row").on("click", "td", function () {

if ($(this).parent().hasClass('row-highlight')) {
    $(this).parent().removeClass('row-highlight');
} else {
    $(this).parent().siblings().removeClass('row-highlight');
    $(this).parent().addClass('row-highlight');

}

}）;

这适用于我的静态表，但仍不适用于动态添加的行。

我已经检查了动态添加的行的html，它们看起来像这样：

<tr class="clickable-row">
<td>some text here</td>
<td class="hidden"><input type="text" name ="ID2" value="2"></td>

html结构与同一个表中的现有行完全相同。行包含在标记中。

我哪里错了？

编辑：由于某种原因，代码块无法正确显示。有一个＆＃34; / tr＆＃34;标记在html示例的末尾，但它没有显示在问题中。

Answer 1

附加到.clickable-row会将处理程序绑定到效率低下的每一行，特别是在大型表上。将它绑定到表格会更好。

$('table').on('click', 'tr td', function(e) {
  alert('click')
});

这将点击新细胞。如果您要点击整行而不是单个单元格，请仅使用tr。

以下是一个例子：this playground example

Answer 2

它可以与您只需要取消绑定和重新绑定的.click（）事件一起使用。

因此，对于添加的新单元格，再次运行必须将“click”事件绑定到表格单元格的代码。

还要确保在再次绑定事件侦听器之前取消绑定事件侦听器。

在这种情况下

$(".clickable-row").unbind("click");

然后运行

 $(".clickable-row").click(function(){
     if($(this).hasClass('row-highlight'))
         $(this).removeClass('row-highlight');
     else
         $(this).addClass('row-highlight').siblings().removeClass('row-highlight');
 }

委托jQuery事件无法处理动态添加的元素

2 个答案: