DataTables服务端模式下等待数据加载后绑定行事件失效问题

你的代码不生效核心是3个问题：

• 仅绑定了order.dt排序事件，换页、搜索、服务端数据重载触发重绘时，你的行绑定逻辑根本不会执行。DataTables重绘会直接替换tbody下的旧tr节点，之前绑在旧DOM上的click事件会跟着被销毁。
• 每次触发排序事件都会给当前页tr重复绑定click事件，多次排序后单个行可能绑定十几次跳转逻辑，会导致重复触发、内存泄漏。
• 把事件注册逻辑放在initComplete里本身逻辑就错了，initComplete只在表格第一次初始化完成时触发一次，后续分页、搜索都不会再执行。

直接用jQuery事件委托，把事件绑在页面初始化后就一直存在的tbody节点上，后续不管表格怎么重绘、替换tr，事件都能正常响应，只需要在document ready阶段绑定一次，不需要放到任何DataTables回调里，代码更简洁也不会出问题：

// 初始化DataTables之前执行即可，全局只绑一次
$('#table tbody').on('click', 'tr', function () {
  // 跳过无数据提示的空行
  if ($(this).hasClass('dataTables_empty')) return;
  const rowId = $(this).find('td:first-child').text().trim();
  if (rowId) {
    window.location.href = `/detail/${rowId}`;
  }
});

如果后续有必须等当前页DOM渲染完才能执行的操作，可以监听draw.dt事件，这个事件会在表格每次完成重绘（首次加载、换页、排序、搜索、服务端数据返回渲染完成）时触发：

// 也是全局只需要注册一次
$('#table').on('draw.dt', function () {
  // 这里写每次重绘后需要执行的DOM操作即可
  // 注意：不要在这里重复给tr绑定click事件，否则会出现重复绑定问题
  console.log('当前页表格渲染完成');
});

补充：不要在draw.dt/order.dt/page.dt这类重复触发的事件回调里给子元素绑定事件，每次触发都会重复绑定，必然出bug。

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