twitter-bootstrap Bootstrap 模式事件未触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28472410/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:18:31  来源:igfitidea点击:

Bootstrap modal event not fired

jquerytwitter-bootstrapmodal-dialog

提问by greenhoorn

I want to simply do some logic after my modal has been dismissed.

在我的模态被解雇后,我只想做一些逻辑。

In the modal I have a button:

在模态中,我有一个按钮:

<button type="button" class="btn btn-primary" onclick="$('#mymodal').modal('hide');">Save changes</button>

In the view I'm waiting for the event being fired, but it never does.

在视图中,我正在等待事件被触发,但它从来没有。

 $('#mymodal').on('hide.bs.modal', function (e) {
       alert('event fired')
});

I tried to put breakpoints in chrome dev tools, the event is only hit at the first load of the view. After that the breakpoint is never reached again. Am I doing something wrong?

我试图在 chrome 开发工具中放置断点,该事件仅在视图的第一次加载时触发。之后,断点再也不会到达。难道我做错了什么?

By the way, the modal is hiding the way I want.

顺便说一句,模态隐藏了我想要的方式。

回答by Rohan Kumar

Try this,

试试这个,

$(function(){ // let all dom elements are loaded
    $('#mymodal').on('hide.bs.modal', function (e) {
        alert('event fired')
    });
});

Working Demo

工作演示

回答by Novocaine

While the accepted answer is correct, I had a slightly different scenario which I didn't find an answer to.

虽然接受的答案是正确的,但我有一个稍微不同的场景,我没有找到答案。

I'm creating my modal's dynamically, so they don't exist on the page load. I'm adding them to the DOM with a JQuery .append('body'). Therefore

我正在动态创建我的模态,所以它们不存在于页面加载中。我正在使用 JQuery 将它们添加到 DOM 中.append('body')。所以

$('#mymodal').on('hide.bs.modal', function(e) {

doesn't work....I had to change my event listener to

不起作用....我不得不将我的事件侦听器更改为

$(document).on('hide.bs.modal', '#mymodal', function(e) {

to work. Hopefully this will help others in the same situation as me.

去工作。希望这会帮助其他与我处于相同情况的人。

回答by Andrew Koster

Make sure that you actually have the Bootstrap Javascript library included in your page. That was my issue. The Bootstrap docs hint at this, but they omit it from the code examples.

确保您的页面中确实包含了 Bootstrap Javascript 库。那是我的问题。Bootstrap 文档暗示了这一点,但他们从代码示例中省略了它。

Here are the files/CDNs for it, since their site avoids linking it from most of the relevant pages, for some reason: https://getbootstrap.com/docs/4.1/getting-started/download/

这是它的文件/CDN,因为他们的站点出于某种原因避免从大多数相关页面链接它:https: //getbootstrap.com/docs/4.1/getting-started/download/