将功能绑定到Twitter Bootstrap Modal Close

Question

我正在一个新项目上使用Twitter Bootstrap lib,我想要部分页面刷新并检索模态关闭时的最新json数据.我在文档中的任何地方都没有看到这个,有人可以指出它或建议解决方案.

使用记录的方法有两个问题

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

我已经将"隐藏"类附加到模态,因此它不会在页面加载时显示,因此会加载两次

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

Answer 1

Bootstrap 3和4

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

Bootstrap 3:getbootstrap.com/javascript/#modals-events

Bootstrap 4:getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

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

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

Answer 2

Bootstrap 4

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

有关工作示例,请参阅此JSFiddle:

http://jsfiddle.net/aq9Laaew/120440/

请参阅此处文档的模态事件部分:

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

Answer 3

启动Bootstrap 3(编辑:在Bootstrap 4中仍然相同)有2个实例,您可以在其中启动事件,其中:

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

Answer 4

您需要使用"on"事件,而不是"live",而是将其分配给文档对象:

使用:

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

Answer 5

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

Answer 6

引导程序 5+ #ES6+

更少的依赖-> 与其他框架一样，Bootstrap 将回归标准，这要归功于新的事件方法

var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
    // do something...
});

请参阅此 JSFiddle 了解工作示例：

https://jsfiddle.net/Metamagikum/cw5f76bp/3/

官方文档位于此处：

https://getbootstrap.com/docs/5.0/components/modal/

Answer 7

引导提供您可以挂接到事件模式一样,如果你想火一个,事件当模式已完成从用户被隐藏,你可以使用 hidden.bs.modal事件这样

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

检查一个工作小提琴在这里阅读文档中有关模态方法和事件的更多信息

Answer 8

引导程序 4：

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

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

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

Answer 9

我会这样做：

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

其余的已经被别人写过了。我还建议阅读文档：jquery - on method