jQuery通过AJAX重载DIV后绑定的onclick点击事件丢失如何解决？

• 事件委托选择器语法错误：你尝试的第一个委托写法$("reload-table]")存在两处语法问题：id选择器缺少#前缀、多了多余的右方括号，导致父容器匹配失败，事件绑定没有生效。
• 类名匹配规则太严格：a[class='Delete']要求元素的class属性完全等于字符串Delete，如果后续元素被动态添加了其他类（比如交互类、状态类）就会匹配失效，改用a.Delete类选择器更健壮。
• 缺少显式的默认行为阻止：仅靠return false在部分场景下无法完全阻止a标签的跳转行为，优先在事件回调开头调用e.preventDefault()更稳妥。
• 存在重复绑定风险：需要确认你已经删除了原来的直接绑定代码$("a[class='Delete']).click(...)，新旧绑定逻辑同时存在可能导致冲突。

可直接使用的修复后代码 #

$(function () {
    // 绑定到不会被重载的固定父容器，性能优于绑定到body/document
    $("#reload-table").on("click", "a.Delete", function (e) {
        // 显式阻止a标签默认跳转
        e.preventDefault();
        const id = $(this).data('id');
        const urlDel = $(this).attr('href');
        const reload = $(this).attr('rel');
        $.ajax({
            type: 'post',
            url: urlDel,
            // 改用对象传参，避免字符串拼接的转义问题
            data: {dataid: id},
            success: function(msg) {   
                $(reload).load(location.href + " " + reload);
                // 加trim处理接口返回的多余空白字符
                if (msg.trim() === 'ok') {
                    showMessage("Deleted", "Data with id: " + id + "</strong> has been deleted.");
                } else {
                    showMessage("Error", "Data with id: <strong>" + id + "</strong> has not deleted.");
                }
            }
        });
        return false;
    });
});

额外排查项 #

如果修改后仍有问题，按以下顺序排查：

1. 打开浏览器开发者工具控制台，确认没有JS报错打断事件绑定流程
2. 确认页面只引入了一次jQuery，多版本jQuery共存会导致数据、事件绑定异常
3. 检查重载后的删除按钮元素，确认class属性包含Delete、data-id等属性值正确

内容的提问来源于stack exchange，提问作者T.S.D.