动态添加表格行的.on click事件偶尔失效问题咨询

我来帮你搞定这个头疼的问题！你用jQuery事件委托绑定动态行的思路本身是没问题的，但出现悬停闪烁、点击多次才触发的情况，大概率是这些原因导致的，咱们一步步排查：

1. 重复绑定事件导致冲突 #

最常见的坑：如果你的动态添加行的代码里，不小心重复执行了事件绑定的代码（比如每次加行都跑一遍$("#tbl").on("click", "tr", ...)），会导致同一个事件被绑定N次。触发时多个事件回调互相干扰，就会出现点击没反应、视觉闪烁的情况。

解决办法：
把事件绑定代码放在页面加载完成后只执行一次，比如：

$(document).ready(function() {
  // 只绑定一次，事件委托会自动监听后续新增的行
  $("#tbl").on("click", "tr", function () {
    alert("test");
  });
});

绝对不要在动态添加行的函数里重复调用这段绑定代码！

2. 行内元素阻止了事件冒泡 #

如果你的表格行里有按钮、链接、输入框这类元素，或者这些元素的代码里写了event.stopPropagation()、return false，会直接阻止点击事件冒泡到<tr>上，导致你绑定的回调触发不了。另外，如果行的hover样式有频繁的重绘操作（比如突然变宽变高、背景色剧烈切换），也会导致视觉闪烁，甚至干扰浏览器的事件监听响应。

解决办法：

• 检查行内元素的代码，去掉不必要的event.stopPropagation()；如果必须保留，那就直接在这些元素上绑定事件，或者用event.target判断点击源：

  $("#tbl").on("click", "tr", function (event) {
    // 如果点击的是行内按钮，直接返回不触发tr的事件
    if ($(event.target).is("button")) return;
    alert("test");
  });
  

• 简化行的hover CSS样式，比如避免同时修改多个会触发重绘的属性（比如边框+背景色+内边距），或者给行添加will-change: background来优化浏览器渲染。

3. 事件委托的目标不够精准 #

你绑定的是tr，但如果表格里有<thead>的行，或者动态添加的行被嵌套在其他容器里，可能会导致事件监听的范围出错。另外，规范的表格结构应该包含<tbody>，动态行最好都添加到<tbody>里，这样事件委托的目标更明确。

解决办法：
修改事件委托的选择器，精准指向<tbody>里的行：

$("#tbl").on("click", "tbody tr", function () {
  alert("test");
});

同时调整你的表格结构，确保动态行都插入到<tbody>中：

<div id="main-tbl"> 
  <table id="tbl" class="table">
    <tbody></tbody> <!-- 动态行添加到这里 -->
  </table> 
</div>

4. jQuery版本或冲突问题 #

如果你的jQuery版本太老（比如1.7之前的版本，.on()是1.7才推出的），或者页面里有其他JS库和jQuery冲突，也可能导致事件委托异常。

解决办法：

• 换成较新的稳定版jQuery（比如3.x系列）；
• 如果有库冲突，用jQuery.noConflict()避免变量名冲突，或者直接用jQuery代替$：

  jQuery("#tbl").on("click", "tbody tr", function () {
    alert("test");
  });
  

5. 浏览器重绘延迟 #

有时候动态添加元素后，浏览器没及时完成重绘，导致元素的事件监听没有正确注册。可以尝试在添加行后强制触发一次重绘：

// 示例：动态添加行的代码
const newRow = "<tr><td>新行内容</td></tr>";
$("#tbl tbody").append(newRow);
// 读取offsetHeight会强制浏览器完成重绘
$("#tbl").get(0).offsetHeight;

内容的提问来源于stack exchange，提问作者Alexander Moiseev