Question

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

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

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

Answer 1

确保在实例化弹出模式

之前放置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 2

将您的功能包裹在$(document).ready(function() {中，或简称为$(function() {。在CoffeeScript中，这看起来像

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

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

Answer 3

试试这个

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

使用shown代替show也可确保在功能结束时让半冒号发出警报。

Answer 4

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

/// TODO EVENTS

});

Answer 5

类似的事情发生在我身上，我已经使用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 6

我有一个类似但不同的问题，当我使用$（＆＃39; #myModal＆＃39;）时仍然无法工作。当我使用$（窗口）时，我能够使它工作。

我的另一个问题是，如果我将模态div html内容存储在javascript变量中，我发现show事件不会触发。

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>

Answer 7

请记住在调用＆＃34; js / bootstrap＆＃34;之后放入脚本，而不是之前。

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>

Answer 9

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

Answer 10

添加：

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

Answer 11

bootstrap4也有同样的问题。解决方案是将其添加到jQuery文档ready（）函数中：

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

Answer 12

有时在以下情况下无法使用

：

1）在$('#myModal').on('show.bs.modal'...)行之前，Java脚本代码中有错误。要进行故障排除，请在该行之前放置一条警报消息，以查看它在加载页面时是否出现。要解决上述问题，请消除上面的JS，看看哪个是问题

2）另一个问题是，如果您以错误的顺序加载JS。例如，在实际加载JQuery.js之前，可以先拥有$('#myModal').on('show.bs.modal'...)部分。在这种情况下，您的调用将被忽略，因此首先在HTML（请确保查看页面源代码）中检查JQuery的脚本链接是否在模态onShow调用上方，否则将被忽略。要进行故障排除，请在显示前先放一个警报。如果您在onShow函数中看到的是之前的一个，而没有看到，则很明显该函数无法执行。如果拼写正确，那么很有可能没有调用JQuery.js或在onShow部分之后进行了调用

Answer 13

有同样的问题。对我来说是我按以下顺序两次加载了jQuery：

已加载jQuery
已加载的引导程序
再次加载jQuery

第二次加载jQuery时，它以某种方式破坏了对引导程序的引用并打开了模式，但on（'shown.bs ..'）方法从未触发。

Answer 14

放置 setTimeout 的流行解决方案在某些情况下可能有效，但它是一个糟糕的解决方案。我自己在将它包装在 $(document).ready() 中时使用它当然（但它从来没有帮助），但我从来没有一个可靠的解决方案。某些浏览器/系统比其他浏览器/系统花费更多时间，有时 1000ms 还不够。我厌倦了寻找 $(document).ready() 为什么没有帮助，所以：

我采取了不同的方法。

当我第一次需要使用模态时，我会订阅模态事件。

<a href="javascript:void(0)" onclick="ShowModal()">Open my modal</a>

在 JS 方面：

function ShowModal() {
    InitModalEventsOnce();
    $('#MyModal').modal('show');
}

var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion

function InitModalEventsOnce() {

    if (!InitModalEventsIsDone) {
        InitModalEventsIsDone = true;

        $('#MyModal').on('shown.bs.modal', function () {
            // something
        })

        $('#MyModal').on('hidden.bs.modal', function (e) {
            // something
        });
    }
}

就是这样！我找到的唯一可靠的解决方案。

Answer 15

发生这种情况的原因可能是之前可能已执行了代码，但代码没有显示出来，因此您可以为其添加timeout（）tp fire。

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });

Answer 16

我使用了jQuery的事件委托/冒泡...对我有用。见下文：

$(document).on('click', '#btnSubmit', function () {
                alert('hi loo');
            })

信息也非常好：https://learn.jquery.com/events/event-delegation/

Answer 17

确保您确实使用 bootstrap jQuery模式，而不是其他jquery模式。

在此上浪费了太多时间...

Answer 18

在我的情况下，问题是travelsize的注释方式如何。bootstrap.js和jquery之间的导入顺序。因为我使用的是Metronic模板，并且之前没有检查

Answer 19

以下是详细信息：

show.bs.modal在模型对话框加载时有效显示.bs.modal在加载后工作做任何事情。后期渲染

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

19 个答案: