绑定一个函数到Twitter Bootstrap Modal Close

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

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

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

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

即使我删除隐藏类并设置元素id为display:none并添加console.log(“the MODAL CLOSED”);到上面的函数，当我点击关闭什么都没有发生。

当前回答

我和一些人有同样的问题

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

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

其他回答

引导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→活动

启动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

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/

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

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

Use:

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

推荐文章