jQuery Bootstrap 3.0.0 模态事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18568278/
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
Bootstrap 3.0.0 modal events not firing
提问by gingerchris
I can't seem to get modal events working at all using Bootstrap 3. I want to perform an action when my modal closes, but nothing's happening.
我似乎无法使用 Bootstrap 3 使模态事件正常工作。我想在我的模态关闭时执行一个操作，但什么也没发生。
Here's my stripped back HTML:
这是我剥离的 HTML：
<button type="button" data-toggle="modal" data-target="#imageUpload">Launch modal</button>
<div class="modal fade" id="imageUpload" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
Upload form here
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
and my JS:
和我的 JS：
$(function(){
$('#imageUpload').modal({
show: false
});
$('#imageUpload').on('hidden', function () {
window.alert('hidden event fired!');
});
});
I've put a JSfiddle together here - http://jsfiddle.net/EcnC3/1/
我在这里放了一个 JSfiddle - http://jsfiddle.net/EcnC3/1/
I've not found any other reports of modal events not working in Bootstrap 3 so I'm sure I've done something wrong, but can't figure it out. Thanks for any help you can offer
我没有发现任何其他关于在 Bootstrap 3 中不起作用的模态事件的报告，所以我确定我做错了什么，但无法弄清楚。谢谢你的尽心帮助
回答by Fint
remove the .fade class from your modal. this worked for me.
从您的模态中删除 .fade 类。这对我有用。
回答by Artyom Neustroev
According to documentationthe event name is like shown.bs.modal:
根据文档，事件名称如下shown.bs.modal：
$('#imageUpload').on('shown.bs.modal', function () {
alert('show event fired!');
});
Have a look at this FIDDLE
看看这个FIDDLE
回答by marlo
removing the fadeclass on the modal element do the fix.
删除fade模态元素上的类进行修复。
https://github.com/twbs/bootstrap/issues/11793
https://github.com/twbs/bootstrap/issues/11793
see @Fint answer
见@Fint 答案
回答by Serexx
The answer marked correct is just that, but an addition to the massive list of 'Dumb things I have done' - also be careful which DOM Element you target. It should be the outer modal Div.
标记为正确的答案就是这样，但除了“我做过的愚蠢事情”的大量列表之外 - 还要注意您的目标 DOM 元素。它应该是外部模态 Div。
For example if you are using RequireJS and a template manager like Knockout-amd-helper you might have markup like this
例如，如果您使用 RequireJS 和像 Knockout-amd-helper 这样的模板管理器，您可能会有这样的标记
Parent markup:
父标记：
<div class="modal fade" id="addThingModal" tabindex="-1" role="dialog" aria-labelledby="addThingModalLabel" aria-hidden="true">
<div data-bind="module: { name: 'addThing'}"></div>
</div>
Template:
模板：
<div id="addThingTemplate" class="modal-dialog">
...
</div>
your script should target '#addThingModal' not '#addThingTemplate'
你的脚本应该针对“#addThingModal”而不是“#addThingTemplate”
回答by Xdrone
There seems to be a bug in the Bootstrap.min.css file for the modal dialog. I changed it to Bootstrap.css and the dialog is now visible.
模式对话框的 Bootstrap.min.css 文件中似乎存在错误。我将其更改为 Bootstrap.css 并且该对话框现在可见。
