jQuery中.off()未解绑模态框按钮事件，点击触发多次问题排查

我有一个模态对话框，当它显示时，会为按钮绑定click事件；当对话框隐藏时，该事件需要被解绑。

为实现此功能，我编写了如下代码：

let register = jQuery('#registerData')
        .modal({backdrop: 'static'})
        .modal('show');
register.on('shown.bs.modal', function () {
    jQuery('#regAddStudent').on('click', function () {
        console.log('agregó');
    });
});
register.on('hidden.bs.modal', function () {
    console.log('pasó');
    jQuery('#regAddStudent').off('click');
});

对话框关闭时，hidden.bs.modal事件已触发，但再次打开模态框并点击regAddStudent按钮时，click处理函数会被调用两次，这说明.off()调用未生效。请问问题出在哪里？

问题根源 #

你这段代码如果每次打开模态框都执行，会导致两个核心问题：

1. 模态框的shown/hidden事件被重复绑定：每次执行代码，都会给#registerData新增一组shown.bs.modal和hidden.bs.modal的回调函数。比如第一次打开绑定1组，第二次打开就有2组，以此类推。
2. 按钮的click事件被多次绑定：每一组shown回调触发时，都会给#regAddStudent绑定一个新的匿名click处理函数。虽然hidden回调会调用off('click')移除所有click事件，但下次打开时，多组shown回调会同时执行，重新给按钮绑定多个click事件，最终点击时就会触发多次。

解决办法 #

办法1：只绑定一次模态框事件（推荐） #

把模态框的事件绑定逻辑抽出来，只执行一次，不要每次打开都重复绑定：

// 初始化模态框（仅执行一次）
const register = jQuery('#registerData').modal({backdrop: 'static'});
// 命名处理函数，方便精准移除
function handleStudentAdd() {
    console.log('agregó');
}

// 绑定一次模态框的显示/隐藏事件
register.on('shown.bs.modal', function () {
    jQuery('#regAddStudent').on('click', handleStudentAdd);
});
register.on('hidden.bs.modal', function () {
    jQuery('#regAddStudent').off('click', handleStudentAdd);
});

// 单独写打开模态框的函数，需要时调用
function openRegisterModal() {
    register.modal('show');
}

这样不管打开多少次模态框，shown和hidden事件只会触发一次对应的回调，按钮每次只会绑定一个click事件，关闭时也能精准移除指定的处理函数。

办法2：绑定前先清理旧事件 #

如果必须每次打开都执行初始化代码，可以在绑定新的click事件前，先移除按钮上所有旧的click事件：

let register = jQuery('#registerData')
        .modal({backdrop: 'static'})
        .modal('show');
register.on('shown.bs.modal', function () {
    // 绑定新事件前先清空旧的，避免重复
    jQuery('#regAddStudent').off('click').on('click', function () {
        console.log('agregó');
    });
});
register.on('hidden.bs.modal', function () {
    console.log('pasó');
    jQuery('#regAddStudent').off('click');
});

这种方式能确保每次绑定的都是最新的单个事件，不会出现重复触发的问题。

办法3：事件委托（适合动态生成的按钮） #

如果#regAddStudent是模态框内动态渲染的元素，用事件委托绑定到模态框本身，无需手动解绑：

const register = jQuery('#registerData').modal({backdrop: 'static'});
// 事件委托绑定到模态框，仅执行一次
register.on('click', '#regAddStudent', function () {
    console.log('agregó');
});

// 打开模态框
register.modal('show');

事件委托会自动处理元素的动态创建和销毁，模态框隐藏时，点击事件自然不会触发，省去手动绑定和解绑的麻烦。

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