jquery-modal插件绑定关闭触发事件不生效如何解决

架构老林

2026-8-31

问题原因

事件绑定时机错误：jquery-modal 初始化时会将绑定模态框的目标元素（即#login-form）移动到插件生成的全局模态框容器中，你当前把关闭事件的绑定写在了模态框首次打开逻辑的外部，绑定时元素还未被插件移动处理，后续DOM结构迁移会导致预先绑定的事件失效。
对事件绑定载体的认知偏差：该插件的模态框事件默认冒泡到document上，给单个模态框元素绑定专属事件的前提是，该元素已经完成插件初始化、被插入到插件生成的模态框DOM结构中，提前绑定不会生效。

正确实现方式

两种方案任选其一即可：

方案1：调整事件绑定时机，等模态框首次初始化完成后再绑定

加标记位避免重复绑定导致逻辑多次触发：

// 标记事件绑定状态，防止重复绑定
let modalEventBound = false;

// 打开模态框逻辑
$('#btn').click(function() {
    $('#login-form').modal({
        showClose: false
    });
    $(this).fadeOut();

    // 首次打开模态框、DOM结构就绪后绑定关闭事件
    if (!modalEventBound) {
        $('#login-form').on($.modal.BEFORE_CLOSE, function(event, modal) {
            alert("hh");
            // 此处写入关闭时需要执行的自定义逻辑
        });
        modalEventBound = true;
    }
});

方案2：绑定全局模态框事件，通过判断触发事件的模态框匹配目标元素执行逻辑

这种方式不需要关心绑定时机，页面加载完成后直接绑定即可：

// 页面加载完成后直接绑定全局事件
$(document).on($.modal.BEFORE_CLOSE, function(event, modal) {
    // 校验当前关闭的是否为目标登录表单模态框
    if (modal.$elm.is('#login-form')) {
        alert("hh");
        // 此处写入关闭时需要执行的自定义逻辑
    }
});

// 打开模态框逻辑
$('#btn').click(function() {
    $('#login-form').modal({
        showClose: false
    });
    $(this).fadeOut();
});