bootstrap jquery show.bs.modal事件不会触发

Question

我正在使用bootstrap 3 docs中的模态示例.模态有效.但是我需要在它触发时访问show.bs.modal事件.现在我只是想:

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

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

Answer 1

用这个:

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

Answer 2

确保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功能.

Answer 3

包含您的功能$(document).ready(function() {,或更简单地说$(function() {.在CoffeeScript中,这看起来像

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

没有它,JavaScript在文档加载之前执行,并且#myModal还不是DOM的一部分.这是Bootstrap参考.

Answer 4

试试这个

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

使用shown而不是show确保在功能结束时保留半冒号并发出警报.

Answer 5

$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});

Answer 6

添加这个：

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

Answer 7

类似的事情发生在我身上,我用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);                        
})

Answer 8

就我而言，我缺少 .modal-dialog div

不触发事件： shown.bs.modal

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

是否触发事件： shown.bs.modal

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