使用hover()方法时jQuery无法识别DataTable的tbody与tr元素

我之前做DataTable开发时也碰到过一模一样的问题，jsfiddle里静态数据跑起来没问题，到项目里用动态加载的表格就失效了，给你几个实用的排查和解决方向：

1. 核心原因：DataTable异步渲染导致元素未就绪 #

DataTable默认是异步加载/渲染数据的，当你直接执行$('.datatable-sort').find('tbody').hover(...)时，tbody里的tr元素可能还没被渲染到DOM中，自然绑定不上事件。而你在jsfiddle里用的是静态数据，DOM加载完成后元素就存在，所以能正常触发。

解决方案：用DataTable的drawCallback回调绑定事件
这个回调会在表格每次绘制完成（包括初始化、分页、排序、搜索后）触发，此时tbody和tr已经完全渲染，能确保事件绑定成功：

$('.datatable-sort').DataTable({
  // 你的表格配置项（列定义、数据源等）
  drawCallback: function(settings) {
    // 获取当前表格的API实例，选中tbody的所有tr
    this.api().$('tbody tr').hover(
      function() {
        // 鼠标移入：创建悬浮窗口并追加到当前行/单元格
        const hoverWindow = $('<div class="your-preset-css-class">这里放表格数据和图片</div>');
        $(this).append(hoverWindow);
      },
      function() {
        // 鼠标移出：移除悬浮窗口
        $(this).find('.your-preset-css-class').remove();
      }
    );
  }
});

2. 更省心的方式：事件委托 #

如果不想每次表格重绘都重新绑定事件，可以用jQuery的事件委托机制，把事件绑定到已存在的父元素上（比如表格本身），这样后续动态生成的tr也能触发事件：

// 绑定鼠标移入移出事件到表格元素，委托给tbody下的tr
$('.datatable-sort').on('mouseenter', 'tbody tr', function() {
  const hoverWindow = $('<div class="your-preset-css-class">这里放表格数据和图片</div>');
  $(this).append(hoverWindow);
}).on('mouseleave', 'tbody tr', function() {
  $(this).find('.your-preset-css-class').remove();
});

这种方式不需要关心表格什么时候渲染，只要父元素$('.datatable-sort')在DOM加载时存在就行。

3. 额外排查点 #

• 检查选择器是否正确：确认项目里的表格类名确实是datatable-sort，有没有拼写错误，或者表格被嵌套在其他容器里需要调整选择器（比如$('#table-container .datatable-sort')）。
• 避免重复绑定：如果用drawCallback，每次重绘都会绑定一次事件，可能导致重复触发，建议绑定前先解绑：

drawCallback: function(settings) {
  this.api().$('tbody tr').off('mouseenter mouseleave').hover(...)
}

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