JS动态创建的HTML表格不响应绑定脚本与样式问题求解

问题现象 #

编写代码实现基础HTML表格，触发按钮onClick事件后会动态生成一个结构相同的HTML表格，动态生成的第二个表格无法响应首个表格绑定的单元格悬停高亮函数，暂未定位到阻碍第二个表格响应对应脚本逻辑的原因。

现有代码 #

CSS样式 #

table,tr,th{
    border:2px solid black;
}
table{
    width:200px;
    height:200px;
}
th.highlight {
    background-color: black;
} 

HTML结构 #

<table id="test">
    <tr><th>test</th><th>test</th><th>test</th></tr>
    <tr><th>test</th><th>test</th><th>test</th></tr>
    <tr><th>test</th><th>test</th><th>test</th></tr>
</table>
<div id="test2"></div>
<button type="button">Add</button>

初始JavaScript逻辑 #

const addColumn = () => {
    var x = document.getElementById("test2");
    x.innerHTML = "<table> <tr><th>test2</th><th>test2</th><th>test2</th></tr> <tr> <th>test2</th><th>test2</th><th>test2</th></tr> <tr><th>test2</th><th>test2</th> <th>test2</th></tr></table>";
}

document.querySelector('button').onclick = addColumn
$('th').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

故障原因 #

$('th').hover() 是直接事件绑定，只会给代码执行时已经存在于DOM树中的th元素绑定悬停事件。动态生成的表格内th是在事件绑定完成后才插入页面的，没有被绑定对应事件，自然无法触发高亮逻辑。

修复方案 #

共有两种可行修复思路：

• 方案1（推荐）：使用事件委托，把事件绑定到所有表格共同的、页面初始加载就存在的祖先节点上（比如document），不用每次生成新元素都重复绑定事件，兼容后续所有动态新增的th元素。修正后的JavaScript代码如下：

const addColumn = () => {
    var x = document.getElementById("test2");
    x.innerHTML = "<table> <tr><th>test2</th><th>test2</th><th>test2</th></tr> <tr> <th>test2</th><th>test2</th><th>test2</th></tr> <tr><th>test2</th><th>test2</th> <th>test2</th></tr></table>";
}

document.querySelector('button').onclick = addColumn
// 事件委托：监听document下所有th的鼠标移入移出事件
$(document).on('mouseenter', 'th', function() {
    $(this).addClass('highlight');
}).on('mouseleave', 'th', function() {
    $(this).removeClass('highlight');
});

• 方案2：在每次动态生成表格插入页面后，给新生成的th元素重新绑定hover事件。这种方式需要重复执行绑定逻辑，维护成本更高，不推荐使用。

内容的提问来源于stack exchange，提问作者Gial Jim