动态创建表格TH的onclick事件禁用后如何重新绑定原函数？

嘿，我来帮你搞定这个重新绑定点击事件的问题！先理清楚你的场景：你通过原生JS动态给表格表头添加了sortTable点击事件，之后用jQuery成功禁用了事件，但现在想重新绑定时遇到了麻烦。

先回顾你的初始绑定代码： #

for (var x = 0; x < r.length; x++) { 
    //Setting the columns 
    if (i === 1) { 
        var headerCell = document.createElement("TH"); 
        headerCell.innerHTML = r[x]; 
        headerCell.id = x; 
        headerCell.onclick = function () { sortTable(this.id, name); } 
        row.appendChild(headerCell); 
    } 
}

问题根源 #

你之前用$('#errorTable TH').prop("onclick", null).off("click");移除事件后，原来的匿名点击函数已经被销毁了，没有保留引用，所以没法直接“恢复”它。得换个思路，提前把绑定逻辑封装好，或者重新构建相同的绑定逻辑。

解决方案1：封装绑定逻辑，复用函数 #

这是最推荐的方式，把绑定点击事件的逻辑抽成独立函数，不管第一次初始化还是后续重新绑定，直接调用就行：

// 封装表头排序点击事件的绑定函数
function bindHeaderSortEvents() {
    $('#errorTable TH').each(function() {
        // 先移除可能存在的旧事件，避免重复绑定
        $(this).off('click');
        // 绑定新的点击事件
        $(this).on('click', function() {
            sortTable(this.id, name);
            // 注意：如果name是局部变量，要确保它在这个函数作用域能访问到
            // 要是name会变化，建议把它存在元素的data属性里，后面会说
        });
    });
}

// 第一次初始化表格完成后，调用绑定
bindHeaderSortEvents();

// 禁用事件时（和你原来的写法一致）
$('#errorTable TH').off('click');

// 需要重新绑定时，直接调用封装的函数
bindHeaderSortEvents();

解决方案2：把关键参数存在元素属性里，避免依赖外部变量 #

如果name是动态变化的，或者担心作用域问题，可以在第一次绑定时把它存到TH元素的data属性里，这样重新绑定时直接从元素上取就行：

第一次绑定的时候修改代码：

for (var x = 0; x < r.length; x++) { 
    if (i === 1) { 
        var headerCell = document.createElement("TH"); 
        headerCell.innerHTML = r[x]; 
        headerCell.id = x;
        // 把name存到元素的data属性中
        headerCell.dataset.sortName = name; 
        headerCell.onclick = function () { 
            sortTable(this.id, this.dataset.sortName); 
        } 
        row.appendChild(headerCell); 
    } 
}

重新绑定的代码：

$('#errorTable TH').each(function() {
    $(this).off('click').on('click', function() {
        sortTable(this.id, this.dataset.sortName);
    });
});

这种方式不依赖外部变量，更稳定，就算name后续有变化，只要元素的data属性没改，就能正确调用。

为什么原方法无法恢复？ #

你最初是给DOM元素的onclick赋值了一个匿名函数，当你移除事件后，这个匿名函数没有被保存到任何变量里，JS垃圾回收机制会把它清理掉，所以没办法直接找回原来的函数，只能重新创建逻辑一致的新函数来绑定。

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