当用户在引导模式对话框之外单击时如何捕获事件？

【问题标题】：How to catch event when user clicks outside of bootstrap modal dialog?当用户在引导模式对话框之外单击时如何捕获事件？
【发布时间】：2017-01-16 11:47:09
【问题描述】：

场景：

我点击一个按钮
对服务器进行 Ajax 调用
返回数据并显示模态

问题：

当用户点击关闭按钮或角落中的“X”时，我通过为这两个元素分配一个类并将一个事件分配给该类来捕获此事件。

代码：

$(document).on("click", ".dialogTankClose", function() {
    //some code
})

我的问题是，当用户在对话框外点击或按下“退出”时，我不知道如何捕捉。

$(document).on("click", "modalCloseEvent",function(){
// how to catch this?
})

我怎样才能捕捉到这个？

【问题讨论】：

标签： javascript jquery asp.net-mvc-5

【解决方案1】：

Bootstrap 模式在关闭时会引发一个事件，您可以将其挂钩到：hidden.bs.modal。无论模态如何关闭，此事件都会触发。试试这个：

$('#bootstrapModal').on("hidden.bs.modal", function() {
    $.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
        $.automation.tanks.tableInit();
    });
});

如果模态被动态添加到 DOM，您可以使用委托事件处理程序：

$(document).on("hidden.bs.modal", '#bootstrapModal', function() {
    $.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
        $.automation.tanks.tableInit();
    });
});

更多信息在Bootstrap documentation

【讨论】：

如果我理解正确，您要求模态容器经常出现在页面上吗？这不是这里的情况。我从我的 ajax 调用返回整个对话框
然后您可以使用委托事件处理程序。答案已更新。