将功能绑定到Twitter Bootstrap Modal关闭

我在一个新项目上使用Twitter Bootstrap lib，我希望页面的一部分刷新并检索模态关闭时的最新json数据。我看不到文档中的任何地方，有人可以向我指出或提出解决方案。

使用记录方法的两个问题

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

我已经在模式上附加了“隐藏”类，因此它不会在页面加载时显示，因此会加载两次

即使我删除了hide类，并将元素ID设置为display:none并console.log("THE MODAL CLOSED");在我点击close时添加到上面的函数中，也没有任何反应。

引导程序3和4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

引导程序3：getbootstrap.com/javascript/#modals-events

引导程序4：getbootstrap.com/docs/4.1/components/modal/#events

引导程序2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

请参阅getbootstrap.com/2.3.2/javascript.html#modals→事件

引导程序4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

有关工作示例，请参见此JSFiddle：

https://jsfiddle.net/6n7bg2c9/

请在此处查看文档的“模态事件”部分：

https://getbootstrap.com/docs/4.3/components/modal/#events

从Bootstrap 3开始（编辑：在Bootstrap 4中仍然相同），有两个实例可以触发事件，它们是：

1. 模态“隐藏”事件开始时

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. 模态“隐藏”事件结束时

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

参考：http : //getbootstrap.com/javascript/#js-events

代替“ live”，您需要使用“ on”事件，但将其分配给文档对象：

采用：

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Bootstrap提供了可以挂接到模式的事件，例如，如果您希望在向用户隐藏模式后触发事件，则可以使用 hidden.bs.modal事件，例如

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

在这里查看工作提琴，在文档中阅读有关模态方法和事件的更多信息。

引导程序4：

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs.modal：调用hide实例方法后，立即触发此事件。

hidden.bs.modal：当向用户隐藏模式后，将触发此事件（将等待CSS转换完成）​​。

我会这样做：

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

其余的已经由其他人编写。我还建议阅读文档：jquery-on方法

我已经看到了许多有关引导事件的答案，例如hide.bs.modal在模式关闭时触发的事件。

这些事件有一个问题：模式中的任何弹出窗口（弹出窗口，工具提示等）都将触发该事件。

当模式关闭时，还有另一种捕获事件的方法。

$(document).on('hidden','#modal:not(.in)', function(){} );

in模态打开时，Bootstrap使用该类。使用hidden事件非常重要，因为在触发in事件时仍会定义该类hide。

由于IE8不支持Jquery :not()选择器，因此该解决方案在IE8中不起作用。

我遇到了一些与

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

您需要将其放置在页面底部，将其放置在顶部永远不会触发该事件。

如果您想在每个模式关闭时触发函数，则可以使用此方法，

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

因此，您无需每次都指定模式ID。