jQuery 将函数绑定到 Twitter Bootstrap Modal 关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8363802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind a function to Twitter Bootstrap Modal Close
提问by BillPull
I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can someone point it out to me or suggest a solution.
我在一个新项目中使用 Twitter Bootstrap lib，我希望页面的一部分在模态关闭时刷新和检索最新的 json 数据。我在文档中的任何地方都没有看到这一点，有人可以向我指出或提出解决方案。
Two problems with using the documented methods
使用记录方法的两个问题
$('#my-modal').bind('hide', function () {
// do something ...
});
I attach a "hide" class to the modal already so it does not display on page load so that would load twice
我已经将“隐藏”类附加到模态，因此它不会在页面加载时显示，因此会加载两次
even if I remove the hide class and set the element id to display:noneand add console.log("THE MODAL CLOSED");to the function above when I hit close nothing happens.
即使我删除了隐藏类并将元素 id 设置为display:none并添加console.log("THE MODAL CLOSED");到上面的函数中，当我点击关闭时也没有任何反应。
回答by Ricardo Lima
Bootstrap 3 & 4
引导程序 3 和 4
$('#myModal').on('hidden.bs.modal', function () {
// do something…
});
Bootstrap 3: getbootstrap.com/javascript/#modals-events
引导程序 3：getbootstrap.com/javascript/#modals-events
Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events
引导程序 4：getbootstrap.com/docs/4.1/components/modal/#events
Bootstrap 2.3.2
引导程序 2.3.2
$('#myModal').on('hidden', function () {
// do something…
});
See getbootstrap.com/2.3.2/javascript.html#modals→ Events
回答by aar0n
Bootstrap 4
引导程序 4
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
});
See this JSFiddle for a working example:
有关工作示例，请参阅此 JSFiddle：
https://jsfiddle.net/6n7bg2c9/
https://jsfiddle.net/6n7bg2c9/
See the Modal Events section of the docs here:
在此处查看文档的模态事件部分：
回答by aesede
Starting Bootstrap 3(edit:still the same in Bootstrap 4) there are 2 instances in which you can fire up events, being:
启动Bootstrap 3（编辑：在Bootstrap 4 中仍然相同）有 2 个实例可以触发事件，分别是：
1. When modal "hide" event starts
1.当模态“隐藏”事件开始时
$('#myModal').on('hide.bs.modal', function () {
console.log('Fired at start of hide event!');
});
2. When modal "hide" event finished
2.当模态“隐藏”事件完成时
$('#myModal').on('hidden.bs.modal', function () {
console.log('Fired when hide event has finished!');
});
回答by Oscar
In stead of "live" you need to use "on" event, but assign it to the document object:
您需要使用“on”事件而不是“live”，但将其分配给文档对象：
Use:
用：
$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
回答by SUNny.K
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
回答by Subodh Ghulaxe
Bootstrapprovide events that you can hook into modal, like if you want to fire a eventwhen the modal has finished being hidden from the user you can use hidden.bs.modalevent like this
引导提供的事件，你可以挂接到模态，就像如果你想触发一个事件时，语气已经完成被隐藏来自用户可以使用hidden.bs.modal事件这样
/* hidden.bs.modal event example */
$('#myModal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Check a working fiddle hereread more about modal methods and events here in Documentation
回答by sendon1982
Bootstrap 4:
引导程序 4：
$('#myModal').on('hidden.bs.modal', function (e) {
// call your method
})
hide.bs.modal: This event is fired immediately when the hide instance method has been called.
hide.bs.modal：当调用 hide 实例方法时，会立即触发此事件。
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidden.bs.modal：当模态完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。
回答by tkartas
I would do it like this:
我会这样做：
$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });
The rest has already been written by others. I also recommend reading the documentation:jquery - on method
其余的已经被别人写了。我还建议阅读文档：jquery - on method
回答by Tortus
I've seen many answers regarding the bootstrap events such as hide.bs.modalwhich triggers when the modal closes.
我已经看到很多关于引导事件的答案，例如hide.bs.modal当模态关闭时触发。
There's a problem with those events: any popups in the modal (popovers, tooltips, etc) will trigger that event.
这些事件存在一个问题：模式中的任何弹出窗口（弹出窗口、工具提示等）都会触发该事件。
There is another way to catch the event when a modal closes.
还有另一种方法可以在模态关闭时捕获事件。
$(document).on('hidden','#modal:not(.in)', function(){} );
Bootstrap uses the inclass when the modal is open.
It is very important to use the hiddenevent since the class inis still defined when the event hideis triggered.
Bootstrapin在模态打开时使用该类。使用hidden事件非常重要，因为在触发in事件时仍然定义了类hide。
This solution will not work in IE8 since IE8 does not support the Jquery :not()selector.
此解决方案在 IE8 中不起作用，因为 IE8 不支持 Jquery:not()选择器。
回答by Michael Granger
I was having the same issues as some with
我和一些人遇到了同样的问题
$('#myModal').on('hidden.bs.modal', function () {
// do something… })
You need to place this at the bottom of the page, placing it at the top never fires the event.
你需要把它放在页面的底部，把它放在顶部永远不会触发事件。
