如何监听另一PHP文件中jQuery模态框的关闭事件并触发回调

问题原因 #

你绑定hidden.bs.modal事件的时候，#CreateUserModal元素还没被插入到当前页面的DOM树中：user.php页面初始化加载时就执行了事件绑定的代码，而模态框是你点击新增按钮后，通过load方法异步拉取CreateUserModal.php的内容才插入到页面里的，所以绑定的事件根本找不到对应的元素，自然不会触发。

解决方法 #

有两种常用的实现方案：

方案1：使用事件委托 #

把事件绑定到页面初始化时就存在的父元素上（比如你代码里的.modal-container，或者直接绑定到document上），事件委托可以监听到后续动态插入的元素的事件，直接替换你原来的事件绑定代码即可：

$(document).on('hidden.bs.modal', '#CreateUserModal', function() {
    console.log('Modal Has been closed');
    // 这里调用你拉取用户数据、刷新userTable的自定义方法即可
});

方案2：在load的回调函数中绑定事件 #

等模态框内容加载完成、已经插入DOM后，再执行事件绑定，修改你的点击事件逻辑即可：

$('#add-user').click(function(e) {
    var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
    $('.modal-container').load(url,function(result){
        $('#CreateUserModal').modal({show:true});
        // 内容加载完成后再绑定事件
        $('#CreateUserModal').on('hidden.bs.modal', function() {
            console.log('Modal Has been closed');
            // 调用刷新用户列表的方法
        });
    });
});

两种方案选任意一种都可以实现你要的效果：用户创建成功触发模态框关闭后，自动执行回调里的刷新用户列表逻辑。

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