jQuery中AJAX调用append tbody后on绑定的点击事件不生效如何解决？

问题核心原因 #

你当前的事件委托绑定在#NewsTable节点上，如果页面运行过程中#NewsTable本身被重绘/替换，或者AJAX返回的新HTML结构有语法错误破坏了表格层级，就会导致事件冒泡链路中断，委托事件失效。

解决方法 #

方案1（最稳妥，优先使用） #

将事件委托绑定到页面加载完成后就不会被修改的上层静态节点（比如document或body），修改后的代码如下：

$(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);
        },
    });
});

方案2（补充检查项） #

如果修改委托节点后仍失效，检查以下内容：

• AJAX返回的HTML代码是否存在标签未闭合、多余嵌套错误，保证返回的<tr> <td>结构符合规范
• 不要在动态返回的HTML内容中内嵌重复的click事件绑定逻辑，避免事件冲突
• 确认页面中没有重复id为NewsTable的元素，导致选择器匹配到错误节点

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