我在一个新项目上使用Twitter Bootstrap库,我想对页面的一部分进行刷新和检索模态关闭上的最新json数据。我在文档中没有看到这个,有人能给我指出来或提出一个解决方案吗?
使用文档中的方法有两个问题
$('#my-modal').bind('hide', function () {
// do something ...
});
我附加了一个“隐藏”类的模式,这样它就不会显示在页面加载,这样就会加载两次
即使我删除隐藏类并设置元素id为display:none并添加console.log(“the MODAL CLOSED”);到上面的函数,当我点击关闭什么都没有发生。
我已经看到了很多关于引导事件的答案,比如当模式关闭时触发的hide.bs.modal。
这些事件有一个问题:模式中的任何弹出窗口(弹出窗口、工具提示等)都会触发该事件。
还有另一种方法可以在模态关闭时捕获事件。
$(document).on('hidden','#modal:not(.in)', function(){} );
当模式打开时,Bootstrap使用in类。
使用隐藏事件是非常重要的,因为当事件隐藏被触发时,类仍然被定义。
此解决方案将无法在IE8中工作,因为IE8不支持Jquery:not()选择器。
引导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→活动
Boootstrap 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/