bootstrap jquery show.bs.modal 事件不会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19279629/
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 jquery show.bs.modal event won't fire
提问by m4rlo
i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying:
我正在使用 bootstrap 3 文档中的模态示例。模态有效。但是我需要在它触发时访问 show.bs.modal 事件。现在我只是在尝试：
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Nothing happens, the event does not fire. What am I doing wrong??? This doesn't make sense to me.
什么都没有发生，事件不会触发。我究竟做错了什么？？？这对我来说没有意义。
回答by Ali
use this:
用这个：
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
回答by Pierre
Make sure you put your on('shown.bs.modal')before instantiating the modal to pop up
确保on('shown.bs.modal')在实例化模态弹出之前放置
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
or
或者
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
To focus on a field, it is better to use the shown.bs.modalin stead of show.bs.modalbut maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modalfunction.
要专注于一个字段，最好使用shown.bs.modalin 代替，show.bs.modal但可能出于其他原因，您想隐藏背景中的某些内容或在模式开始显示之前设置某些内容，请使用该show.bs.modal功能。
回答by Chloe
Wrap your function in $(document).ready(function() {, or more simply, $(function() {. In CoffeeScript, this would look like
总结你的功能$(document).ready(function() {，或者更简单地说，$(function() {。在 CoffeeScript 中，这看起来像
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Without it, the JavaScript is executing before the document loads, and #myModalis not part of the DOM yet. Here is the Bootstrap reference.
没有它，JavaScript 会在文档加载之前执行，并且#myModal还不是 DOM 的一部分。这是Bootstrap 参考。
回答by Zeekoi Inc.
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
回答by Trevor
Try this
尝试这个
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Using showninstead of showalso make sure you have your semi colons at the end of your function and alert.
使用shown而不是show还确保您在函数的末尾有分号并发出警报。
回答by zaarour
Add this:
添加这个：
$(document).ready(function(){
$(document).on('shown.bs.modal','.modal', function () {
// DO EVENTS
});
});
回答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 wjfinder77
I had a similar but different problem and still unable to work when I use $('#myModal'). I was able to get it working when I use $(window).
我有一个类似但不同的问题，但在使用 $('#myModal') 时仍然无法工作。当我使用 $(window) 时，我能够让它工作。
My other problem is that I found that the show event would not fire if I stored my modal div html content in a javascript variable like.
我的另一个问题是，我发现如果我将模态 div html 内容存储在一个 javascript 变量中，则不会触发 show 事件。
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
the event never fired because it didn't occur
该事件从未被触发，因为它没有发生
my fix was to include the divs in the html body
我的解决方法是在 html 正文中包含 div
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
回答by aeroson
In my case, I was missing the .modal-dialog div
就我而言，我错过了 .modal-dialog div
Doesn't fire event: shown.bs.modal
不触发事件：shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Does fire event: shown.bs.modal
是否触发事件：shown.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
回答by Iúri Batista Teles
Remember to put the script after the call of "js/bootstrap", not before.
请记住将脚本放在“js/bootstrap”调用之后，而不是之前。
