如何解决Bootstrap4隐藏模态框关闭后仍响应keyup事件的问题

问题根源 #

你遇到的事件残留问题是以下几个错误写法共同导致的：

• 每次模态框显示时，都重复绑定keyup事件，从未清理之前绑定的事件回调，导致关闭模态框后旧事件依然生效
• 模态框标题和提示文本用append()方法追加内容，而非替换原有内容，多次打开会叠加多个用户的提示信息
• 模态框关闭后没有重置输入框内容、删除按钮状态等数据，残留上一次操作的状态
• 额外样式问题：现有模态框最外层DOM多写了modal-dialog类，会导致样式异常，建议删除外层的该类，内层已经有对应的modal-dialog节点。

完整修复代码 #

替换你现有的模态框事件逻辑即可：

// 模态框显示时填充数据
$("#delete-user-modal").on('show.bs.modal', function (event) {
    // 解绑之前绑定的keyup事件，避免残留
    $(this).off('keyup');
    var button = event.relatedTarget;
    var userId = button.getAttribute('data-bs-user-id');
    var username = button.getAttribute('data-bs-username');

    var modalTitle = $(this).find('.modal-title');
    var modalP = $(this).find('.modal-body > p');
    // 明确选中用户名输入框和用户ID输入框
    var usernameInput = $(this).find('#username-input');
    var userIdInput = $(this).find('input[name="user_id"]');
    var modalDeleteBtn = $(this).find('#modal-delete-button');

    // 用html()替换内容，不用append避免叠加
    modalTitle.html('Vuoi eliminare <span class="bold">' + username + '</span>?');
    modalP.html('Scrivi <span class="bold">' + username + '</span> per confermare');
    // 给隐藏的用户ID输入框赋值，后续提交删除请求时使用
    userIdInput.val(userId);
    // 确保初始状态删除按钮是禁用的
    modalDeleteBtn.addClass('disabled');

    // 绑定新的keyup事件
    $(this).on('keyup', function() {
        if (usernameInput.val() === username) {
            modalDeleteBtn.removeClass('disabled');
        } else {
            // 输入不对时重新禁用按钮
            modalDeleteBtn.addClass('disabled');
        }
    })
})

// 模态框关闭后重置所有状态
$("#delete-user-modal").on('hidden.bs.modal', function() {
    var modalTitle = $(this).find('.modal-title');
    var modalP = $(this).find('.modal-body > p');
    var usernameInput = $(this).find('#username-input');
    var userIdInput = $(this).find('input[name="user_id"]');
    var modalDeleteBtn = $(this).find('#modal-delete-button');

    // 清空所有内容和状态
    modalTitle.empty();
    modalP.empty();
    usernameInput.val('');
    userIdInput.val('');
    modalDeleteBtn.addClass('disabled');
    // 解绑keyup事件
    $(this).off('keyup');
})

后续删除逻辑补充 #

你可以给#modal-delete-button绑定点击事件，调用接口删除对应用户，删除完成后调用$("#delete-user-modal").modal('hide')关闭模态框，再刷新表格即可。

内容的提问来源于stack exchange，提问作者Marco Ferrè