动态生成HTML表格的Hover事件失效问题求助

嘿，我一眼就看出问题所在了——你用普通的hover绑定事件的时候，那些动态生成的<tr>元素还根本不存在呢！jQuery的常规事件绑定只会作用于绑定瞬间已经存在的DOM元素，后来新增的元素自然不会触发这些事件。

解决这个问题的核心就是用事件委托，把事件绑定到一个已经存在的父元素上，让它来监听子元素的事件。另外你的DOM生成代码也有点小问题，<th>和<td>没正确嵌套到<tr>里面，这会导致prev()找不到对应的表头行，得一起修正。

修正后的完整代码 #

JavaScript代码

var statTable = $('<table>', {"id": "statTable", "class": "statTable"});
$("#tableCreate").click(function() {
  $("#newDiv").append(statTable);
  // 确保tbody被正确添加到表格内
  statTable.append("<tbody>");
  $(this).prop('disabled', true);
});
$("#setCreate").click(function() {
  // 修正DOM嵌套：将<th>放入<tr>后再添加到tbody
  $("<tr>").append($("<th>").text("HEADER")).appendTo("#statTable tbody");
  // 同理，将<td>放入<tr>后添加到tbody
  $("<tr>").append($('<td>').text("TESTING...")).appendTo("#statTable tbody");
});

// 使用事件委托处理动态元素的hover事件
$("#statTable tbody").on('mouseenter mouseleave', 'tr:has(td)', function(e) {
  var targetHeaderRow = $(this).prev();
  if (e.type === 'mouseenter') {
    targetHeaderRow.removeClass('green').addClass('red');
  } else {
    targetHeaderRow.removeClass('red').addClass('green');
  }
});

CSS代码（保持不变即可）

td { border: 1px solid black; }
th { background-color: green; border: 1px solid black; }
.red { background-color: red !important; }
.green { background-color: green !important; }

HTML代码（保持不变即可）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<button id="tableCreate">make table </button>
<button id="setCreate">add set</button>
<div id="newDiv">
</div>
</html>

关键改动说明 #

1. 事件委托替换直接绑定：
   用$("#statTable tbody").on('mouseenter mouseleave', 'tr:has(td)', ...)代替原来的$("#statTable tr").hover(...)。这里：

   • #statTable tbody是稳定的事件监听容器（表格创建后它就存在了）
   • tr:has(td)是筛选器，只监听包含<td>的数据行，避免表头行自己触发事件
   • mouseenter和mouseleave是hover的底层事件，用on绑定更适配事件委托场景

2. 修正DOM结构错误：
   原来的$("tbody").append($("<tr>")).append($("<th>"))会把<th>直接加到<tbody>里，导致表格结构混乱。改成$("<tr>").append($("<th>")).appendTo("#statTable tbody")，确保<th>正确嵌套在表头行的<tr>中，这样数据行的prev()就能准确找到对应的表头行。

现在测试一下：点击"make table"创建表格，再点击"add set"添加表头和数据行，鼠标悬停数据行时，对应的表头行就会正常切换红绿色啦~

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