本文旨在解决在使用 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 事件失效的问题。 这种方法不仅简单易用，而且能够确保动态添加的元素也能正确响应事件。 在开发过程中，应尽量采用事件委托的方式来绑定事件监听器，以提高代码的健壮性和可维护性。
以上就是jQuery Ajax Append 后 On Click 事件失效问题解决方案的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1293431.html
微信扫一扫 
支付宝扫一扫 
