引导jquery show.bs.modal事件不会触发

我使用bootstrap 3文档中的模式示例。 模式的作品。 但是我需要访问show.bs.modal事件,当它触发。 现在我只是想:

$('#myModal').on('show.bs.modal', function () { alert('hi') }) 

没有任何事情发生,事件不会发生。 我究竟做错了什么??? 这对我来说没有意义。

确保在实例化popup的模式之前先放上on('shown.bs.modal')

 $("#myModal").on("shown.bs.modal", function () { alert('Hi'); }); $("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true }); 

要么

 $("#myModal").on("shown.bs.modal", function () { alert('Hi'); }).modal('show'); 

要专注于一个领域,最好使用shown.bs.modal来代替show.bs.modal但也许由于其他原因你想隐藏背景或在模式开始显示之前设置一些东西,使用show.bs.modal函数。

用这个:

 $(document).on('show.bs.modal','#myModal', function () { alert('hi'); }) 

将函数包装在$(document).ready(function() { ,或者更简单地, $(function() { 。在CoffeeScript中,这看起来像

 $ -> $('#myModal').on 'show.bs.modal', (event)-> 

没有它,JavaScript在文档加载之前执行,并且#myModal不是DOM的一部分。 这是Bootstrap引用 。

尝试这个

 $('#myModal').on('shown.bs.modal', function () { alert('hi'); }); 

使用shown而不是show也确保你有你的function和警报的末尾你的分号。

我有一个类似但不同的问题,当我使用$('#myModal')时仍然无法工作。 当我使用$(窗口)时,我能够得到它的工作。

我的另一个问题是,我发现show事件不会触发,如果我把我的模态div html内容存储在一个JavaScriptvariables像。

 var content="<div id='myModal' ..."; $(content).modal(); $(window).on('show.bs.modal', function (e) { alert('show test'); }); 

事件从未被解雇,因为它没有发生

我的修补程序是包括在HTML体内的div

 <body> <div id='myModal'> ... </div> <script> $('#myModal).modal(); $(window).on('show.bs.modal', function (e) { alert('show test'); }); </script> </body> 

类似的事情发生在我身上,我已经解决了使用setTimeout。

Bootstrap正在使用以下超时完成显示:

c.TRANSITION_DURATION = 300,c.BACKDROP_TRANSITION_DURATION = 150,

所以使用300以上必须工作,对我来说200工作:

 $('#myModal').on('show.bs.modal', function (e) { setTimeout(function(){ //Do something if necessary }, 300); }) 
 $(document).on('shown.bs.modal','.modal', function () { /// TODO EVENTS }); 

确保在使用Bootstrap之前加载jQuery。 听起来很基本,但我遇到的问题捕捉这些模态事件,并发现错误不是与我的代码,但我是在jQuery之前加载Bootstrap。

以下是详细的细节:

show.bs.modal工作时,模型对话框加载shown.bs.modal加载后工作的任何事情。 张贴呈现

记得在“js / bootstrap”的调用之后放置脚本,而不是之前。

添加这个:

 $(document).ready(function(){ $(document).on('shown.bs.modal','.modal', function () { // DO EVENTS }); }); 

就我而言,我错过了.modal-dialog div

不会触发shown.bs.modal

 <div id="loadingModal" class="modal fade"> <p>Loading...</p> </div> 

是否显示fire.bs.modal

 <div id="loadingModal" class="modal fade"> <div class="modal-dialog"> <p>Loading...</p> </div> </div>