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

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 docs中的模态示例。模态有效。但是我需要在它触发时访问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.

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

12 个解决方案

#1

Make sure you put your on('shown.bs.modal') before instantiating the modal to pop up

确保在实例化弹出模式之前先打开（'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');

To focus on a field, it is better to use the shown.bs.modal in stead of show.bs.modal but 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.modal function.

要专注于一个字段，最好使用shown.bs.modal而不是show.bs.modal，但也许出于其他原因你想隐藏背景或在模态开始显示之前设置一些东西，使用show.bs.modal函数。

#2

use this:

用这个：

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

#3

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 #myModal is not part of the DOM yet. Here is the Bootstrap reference.

没有它，JavaScript在文档加载之前执行，而#myModal还不是DOM的一部分。这是Bootstrap参考。

#4

Try this

尝试这个

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

Using shown instead of show also make sure you have your semi colons at the end of your function and alert.

使用显示而不是显示也可以确保在功能结束时使用半冒号并发出警报。

#5

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);                        
})

#6

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

/// TODO EVENTS

});

#7

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'）时仍然无法工作。当我使用$（窗口）时，我能够使它工作。

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>

#8

Remember to put the script after the call of "js/bootstrap", not before.

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

#9

Ensure that you are loading jQuery before you use Bootstrap. Sounds basic, but I was having issues catching these modal events and turns out the error was not with my code but that I was loading Bootstrap before jQuery.

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

#10

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>

#11

Below are the granular details:

以下是详细信息：

show.bs.modal works while model dialog loading shown.bs.modal worked to do any thing after loading. post rendering

show.bs.modal工作时模型对话框加载shown.bs.modal加载后做任何事情。后渲染

#12

Add this:

添加这个：

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

#1