委托的jQuery事件不适用于动态添加的元素

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结构是完全一样在同一个表中现有的行。这些行包含在标签中。

我哪里错了？

编辑：出于某种原因，代码块显示不正确。在html示例的末尾有一个“/ tr”标签，但它并未显示在问题中。

Answer 1

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

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

这将点击新的单元格。如果是想要单击而不是单个单元格的整行，请使用tr。

下面是一个例子：http://jsfiddle.net/es8rLhpt/2/

Answer 2

它可以与你只需要解除绑定并重新绑定。点击（）事件工作。

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

还要确保在再次绑定事件侦听器之前解除事件侦听器的绑定。

在这种情况下

$(".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'); 
}