绑定一个函数到Twitter Bootstrap Modal Close

我在一个新项目上使用Twitter Bootstrap库，我想对页面的一部分进行刷新和检索模态关闭上的最新json数据。我在文档中没有看到这个，有人能给我指出来或提出一个解决方案吗?

使用文档中的方法有两个问题

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

我附加了一个“隐藏”类的模式，这样它就不会显示在页面加载，这样就会加载两次

即使我删除了隐藏类，并将元素id设置为display:none，并在上面的函数中添加console.log("THE MODAL CLOSED");，当我点击关闭时，什么也没有发生。

649868 次浏览
小开

引导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 &4

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

引导3:getbootstrap.com/javascript/ # modals-events

引导4:getbootstrap.com/docs/4.1/components/modal/ #事件

2.3.2引导

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

参见getbootstrap.com/2.3.2/javascript.html #情态动词→事件

小开
< >强引导< / >强提供事件，你可以挂钩到< >强模态< / >强，就像如果你想要触发一个事件，当模态已经完成隐藏用户，你可以使用hidden.bs.modal事件 这样的< / p > 
    /* hidden.bs.modal event example */
$('#myModal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})

检查工作< >强小提琴这里< / >强阅读更多关于模态方法和事件在这里文档 .

小开

你需要使用"on"事件来代替"live"，但是把它赋值给document对象:

使用:

$(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')
});
小开

从引导3开始(编辑:在引导4中仍然相同)，有2个实例，其中您可以触发事件，分别是:

1. # EYZ0

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

2. # EYZ0

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

裁判:# EYZ0

小开

我看到过很多关于引导事件的答案，比如当模式关闭时触发的hide.bs.modal。

这些事件有一个问题:模式中的任何弹出窗口(弹出窗口、工具提示等)都会触发该事件。

还有另一种方法可以在模态关闭时捕获事件。

$(document).on('hidden','#modal:not(.in)', function(){} );
模式打开时Bootstrap使用in类。 使用hidden事件是非常重要的，因为当事件# eyz2被触发时，类in仍然被定义

这个解决方案将无法在IE8中工作，因为IE8不支持Jquery :not()选择器。

小开

我和一些人有同样的问题

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

你需要把它放在页面的底部，把它放在顶部永远不会触发事件。

小开

引导4:

$('#myModal').on('hidden.bs.modal', function (e) {
// call your method
})
< p > # EYZ0: 当调用hide实例方法时，立即触发此事件 < p > # EYZ0: 当模态完成对用户隐藏时触发此事件(将等待CSS转换完成)
小开

我会这样做:

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

剩下的已经被别人写了。我还建议阅读文档:Jquery - on方法

小开

如果你想在每个模态闭合时触发一个函数，你可以使用这个方法，

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

所以你不需要每次都指定模态id。

小开

引导带5+ #ES6+

# EYZ0→像其他框架一样，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/


提交答案