将一个函数绑定到Twitter Bootstrap模式closures
我在一个新的项目上使用Twitter Bootstrap lib，我希望页面的一部分刷新并检索最近的模式closures的json数据。 我没有看到在文档中的任何地方可以有人指出，或build议一个解决scheme。
使用logging的方法有两个问题
$('#my-modal').bind('hide', function () { // do something ... }); 我已经附加了一个“隐藏”类到模式已经所以它不会显示在页面加载，所以会加载两次
即使我删除隐藏类，并设置元素ID display:none和添加console.log("THE MODAL CLOSED"); 到上面的function时，我碰到什么都没有发生。
Bootstrap 3
$('#myModal').on('hidden.bs.modal', function () { // do something… })
请参阅getbootstrap.com/javascript/#modals-events
Bootstrap 2.3.2
$('#myModal').on('hidden', function () { // do something… })
请参阅getbootstrap.com/2.3.2/javascript.html#modals→事件
对于Bootstrap v3.0，你只需要绑定一个像这样的事件：
$('#my-modal').on('hidden.bs.modal', function () { window.alert('hidden event fired!'); });
请参阅文档中的模式使用部分：
http://getbootstrap.com/javascript/#modals-usage
看到这个JsFiddle的一个工作的例子：
启动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
$(document.body).on('hidden.bs.modal', function () { $('#myModal').removeData('bs.modal') });
而不是“活”，你需要使用“开”事件，但将其分配给文档对象：
使用：
$(document).on('hidden.bs.modal', '#Control_id', function (event) { // code to run on closing });
Bootstrap提供了可以挂钩到模态的事件，就像在模型完成对用户隐藏的时候你想要触发一个事件一样 ，你可以使用像这样的hidden.bs.modal事件
/* hidden.bs.modal event example */ $('#myModal').on('hidden.bs.modal', function () { window.alert('hidden event fired!'); })
在这里查看一个工作小提琴在这里阅读文档中的更多关于模态方法和事件
我已经看到许多关于引导程序事件的答案，例如hide.bs.modal ，当模式closures时触发。
这些事件有问题：模式中的任何popup窗口（popup窗口，工具提示等）都会触发该事件。
当一个模式closures时，还有另外一种方法来捕捉事件。
$(document).on('hidden','#modal:not(.in)', function(){} );
Bootstrap在模式打开时使用in class。 使用hidden事件是非常重要的，因为事件hide触发时仍然定义了类。
这个解决scheme在IE8中不起作用，因为IE8不支持Jquery :not()select器。
我在这里超级跳，但对于使用Bootstrap模态与React的人来说，我一直在使用MutationObserver来检测模态可见性的变化并相应地调整状态 – 这个方法可以应用于模态closures时运行的任何函数：
//react stuff componentDidMount: function() { var self = this; $(function() { $("#example_modal").addClass('modal'); //use MutationObserver to detect visibility change //reset state if closed if (MutationObserver) { var observer = new MutationObserver(function(mutations) { //use jQuery to detect if element is visible if (!$('#example_modal').is(':visible')) { //reset your state self.setState({ thingone: '', thingtwo: '' }); } }); var target = document.querySelector('#example_modal'); observer.observe(target, { attributes: true }); } }); }
对于那些想知道现代浏览器支持的人来说，CanIUse的MutationObserver覆盖了87％
希望能帮助别人:)
干杯，
可靠的人
我遇到了和一些同样的问题
$('#myModal').on('hidden.bs.modal', function () { // do something… })
您需要将其放置在页面的底部，将其置于顶部从不触发事件。
