jQuery 显示模态时不触发 Twitter Bootstrap 模态事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19662896/
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
Twitter Bootstrap Modal Event Not Fired When Modal is Shown
提问by TK123
According to the docs:
根据文档：
http://getbootstrap.com/javascript/#modals
http://getbootstrap.com/javascript/#modals
It should fire the methods "show.bs.dropdown" and "shown.bs.dropdown". But it doesn't:
它应该触发方法“show.bs.dropdown”和“shown.bs.dropdown”。但它没有：
HTML:
HTML：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">Hello world</div>
</div>
</div>
jQuery:
jQuery：
// show.bs.modal doesn't work either
$('#myModal')
.modal('show')
.on('show.bs.modal', function() {
alert('shown baby!');
});
回答by Ajeet Sinha
回答by rzehan
When it happens
当它发生时
Event shown.bs.modal is not fired when modal has also class "fade". Whereas show.bs.modal always works. See https://github.com/twbs/bootstrap/issues/11793
当模态也具有“淡入淡出”类时，不会触发显示.bs.modal 的事件。而show.bs.modal 始终有效。见 https://github.com/twbs/bootstrap/issues/11793
HTML:
HTML：
<div class="modal fade" id="first" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">Hello world from first modal</div>
</div>
</div>
<div class="modal" id="second" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">Hello world from second modal</div>
</div>
</div>
jQuery:
jQuery：
$('.modal').on('shown.bs.modal', function() {
//fired only in second modal
console.info('shown.bs.modal');
});
$('.modal').on('show.bs.modal', function() {
//fired always
console.info('show.bs.modal');
});
Solution
解决方案
For bootstrap v3.3.6 replace line 1010 with:
对于 bootstrap v3.3.6，将第 1010 行替换为：
that.$element // wait for modal to slide in
What is the problem
问题是什么
Look at lines 1006-1015:
查看第 1006-1015 行：
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$dialog // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)
})
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
that.$element.trigger('focus').trigger(e)
Without transition (no fadeclass) the event eis triggered right away (on that.$element). With transition, I'm not sure why exactly, but somehow the bsTransationEndevent from function emulateTransitionEndis not handled by that.$dialog.one(). But with that.$element, everything seem to work.
没有转换（没有淡入淡出类），事件e会立即触发（在那个.$元素上）。对于转换，我不确定为什么会这样，但不知何故，函数emulateTransitionEnd 中的bsTransationEnd事件不是由that.$dialog.one() 处理的。但是有了that.$element，一切似乎都奏效了。
回答by itsazzad
Similar thing happened to me and I have solved using setTimeout.
类似的事情发生在我身上，我已经使用 setTimeout 解决了。
Bootstrap is using the following timeout to complete showing:
Bootstrap 使用以下超时来完成显示：
c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,
c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,
So using more than 300 must work and for me 200 is working:
所以使用超过 300 必须工作，对我来说 200 工作：
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
回答by Mirza Selimovic
you forgot the "n" on shown
你忘记了显示的“n”
$(document).ready(function(){
$('#myModal')
.modal('show')
.on('shown.bs.modal', function() {
alert('shown baby!');
});
});
回答by ymakux
Use document instead of your custom selector. Both shown.bs.modal and show.bs.modal work just fine
使用文档而不是您的自定义选择器。show.bs.modal 和 show.bs.modal 都工作得很好
$(document).on('shown.bs.modal', '.modal', function() {
alert();
});
回答by Alejandro Pablo Tkachuk
In case someone stumbles upon this problem, make sure you hook the on hidden/ shownevent beforefiring the toggleof the modal. That is, declare this:
如果有人偶然发现这个问题，请确保在触发模态之前挂钩 on hidden/shown事件。也就是说，声明如下：toggle
$("#selector").on("hidden.bs.modal", function () {
// do the right thing
});
Before calling the toggle of the modal, e.g.:
在调用模态的切换之前，例如：
("#selector").modal("toggle");
I know this is basic, but in a convoluted code it happens.
我知道这是基本的，但在复杂的代码中它发生了。
回答by holmescn
I found a solution that works with .fadetransitions:
我找到了一个适用于.fade过渡的解决方案：
$(document).on($.support.transition.end, '.modal.fade.in', function(e) {
var $target = $(e.target);
if ($(e.target).is(".modal-dialog")) {
console.log("Modal Shown")
}
});
$(document).on($.support.transition.end, '.modal.fade', function(e) {
var $target = $(e.target);
if (!$target.is(".modal.fade.in") && !$target.is(".modal-dialog")) {
console.log("Modal Hidden")
}
});
回答by Eric Amshukov
If your modal is dynamicallycreated, select the closest static parent element and add your modal as a parameter for bootstrap modal events to work:
如果您的模态是动态创建的，请选择最近的静态父元素并将您的模态添加为引导模态事件工作的参数：
/* body is static, .modal is not */
$("body").on('shown.bs.modal', '.modal', function() {
alert('shown');
});
$("body").on('hidden.bs.modal', '.modal', function() {
alert('hidden');
});
$("body").on('show.bs.modal', '.modal', function() {
alert('show');
});
$("body").on('hide.bs.modal', '.modal', function() {
alert('hide');
});
