本文旨在解决在使用 jQuery Ajax 请求后，通过 append 方法更新 tbody 内容时，原有的 on click 事件失效的问题。文章将深入分析事件失效的原因，并提供基于事件委托的解决方案，确保动态添加的元素也能正确响应点击事件。
问题分析
当使用 jQuery 的 append 方法向 tbody 中添加新的 tr 或 td 元素时，直接使用 $('#NewsTable').on('click', 'td', function(){ ... }); 绑定的事件监听器可能无法在新添加的元素上生效。 这是因为这种绑定方式只对页面加载时存在的元素有效。 当 tbody 的内容被 empty() 清空，然后通过 append() 添加新的元素时，原先绑定的事件监听器并没有自动应用到新元素上。
解决方案：事件委托
解决这个问题的关键在于使用事件委托。 事件委托的核心思想是将事件监听器绑定到父元素（通常是 document 或静态存在的父元素）上，然后利用事件冒泡的机制，在父元素上捕获子元素触发的事件。 这样，即使子元素是动态添加的，也能正确响应事件。
以下是修改后的代码示例：
$(document).on('click', '#NewsTable td', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'ajax.php',
data: 'data',
beforeSend: function() {
$('#loader').show();
},
success: function(response) {
$('#NewsTable tbody').empty();
$('#NewsTable tbody').append(response); // 数据正确加载，现在点击事件也能正常工作
},
error: function(xhr, status, error) {
console.log(error);
},
});
});代码解释：
- $(document).on('click', '#NewsTable td', function(e) { ... }); 这行代码将 click 事件监听器绑定到 document 对象上。 当点击 NewsTable 表格内的 td 元素时，事件会冒泡到 document 对象，然后触发绑定的事件处理函数。
- e.preventDefault(); 阻止默认的点击行为，例如阻止链接跳转。
- $.ajax({...}); 发起 Ajax 请求，获取新的数据。
- $('#NewsTable tbody').empty(); 清空 tbody 中的内容。
- $('#NewsTable tbody').append(response); 将 Ajax 返回的数据添加到 tbody 中。
注意事项：
- 将事件委托绑定到 document 对象上是最常用的方式，但如果你的 NewsTable 元素有一个静态存在的父元素，将事件委托绑定到该父元素上可以提高性能。 避免将事件委托绑定到过于顶层的元素，例如 body，因为它可能会影响整个页面的性能。
- 确保选择器 #NewsTable td 能够准确匹配到你想要监听点击事件的 td 元素。
- 如果你的 ajax.php 返回的 HTML 结构不正确，例如缺少必要的 tr 或 td 标签，可能会导致事件监听器无法正确工作。
总结
通过使用事件委托，可以解决 jQuery Ajax append 后 on click 事件失效的问题。 这种方法不仅简单易用，而且能够确保动态添加的元素也能正确响应事件。 在开发过程中，应尽量采用事件委托的方式来绑定事件监听器，以提高代码的健壮性和可维护性。
