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

82

我正在使用bootstrap 3 docs中的模式示例。模态作品。但是，当它触发时，我需要访问show.bs.modal事件。现在我只是在尝试：

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

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

modal-dialog  twitter-bootstrap-3  jquery 
— m4rlo
source

Answers:

102

用这个：

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
— 阿里
source
8
这解决了我的问题。但是我将其放置在document.ready函数之外。当我放入document.ready时，它不起作用。可能会帮助某人。
— Harish Chinju
2
这应该是一个可以接受的答案，因为它与通过创建动态创建的Ajax模态非常完美$(data).modal('show');。
— kjdion84 '17
2
这将触发您在文档上具有的每个模态。要仅定位特定的模态，可以使用$(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });。ID来自<div class="modal fade" id="my-modal-id">
— przno，
2
@przno不，不是，第二个参数是指定元素的选择器。
— 汤姆（Tom），
使用时$(document).on(...，将侦听器附加到文档上下文，无论目标元素是否存在，都将其附加到文档上下文。您应该将事件名称添加为第一个参数，并将回调名称添加为最后一个，但是您可以将查询选择器添加为第二个参数
— Ali
81

确保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函数。

— 皮埃尔
source
@ kjdion84-在此处创建它们的地方，应绑定事件。var amodal = $（“ <div modal ... />”）; amodal.on（...，myfunc）.modal（'show'）;
— Pierre
如果使用，则不必绑定任何事件$(document).on()。
— kjdion84 '17
2
^这解决了我的问题。此外，show.bs.modal与有所不同shown.bs.modal。前者在模态即将显示时触发。后者已显示出来。大不同。
— 福泽幸男'18
@Pierre是什么意思show.bs.modal？
— KUMAR
@KUMAR是您调用时引导程序正在调用的事件.modal('show')。有它要求情态四个事件：show.bs.modal，shown.bs.modal，hide.bs.modal，hidden.bs.modal-展现的是当它要表明，当它显示出，同为隐藏和隐藏。getbootstrap.com/docs/3.4/javascript/#modals-events
— Pierre
18

将您的功能包装在中$(document).ready(function() {，或更简单地说，是$(function() {。在CoffeeScript中，这看起来像

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

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

— 克洛伊
source
12 
$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});
— Zeekoi Inc.
source
2
不知何故，这是对我最有帮助的答案。似乎可以使用.modal而不是引用模式ID来解决问题……谢谢！
— mabu
这是最好的答案，因为它是非特定的，将在显示的任何模式下触发，而不是仅在设置模式触发时触发。
— IDID
9

试试这个

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

使用shown而不是show还要确保在功能结束时有分号并发出警报。

— 特雷弗
source
7
“ show.bs.modal”和“ shown.bs.modal”都应出于我的目的工作，它们在引导文档中均被列为有效事件。仍然不起作用。
— m4rlo
1
您是否已验证jQuery是否正常工作，例如$（document）.ready（function（）{alert（'test'）;}）;
— Trevor 2013年
是的，如果我在show事件之外，仅在document.ready内发出警报，则它将触发。
— m4rlo
1
@BassJobsen他在html中引用了application.js两次，其中之一正在加载正确的文件。另一个找不到。那会导致问题吗？
— Trevor
1
谢谢@Trevor。它也对我有用。我包括2个jquery.js。:-p
— Akshay Vishnoi '16
7

添加：

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});
— 扎鲁尔
source
6

类似的事情发生在我身上，我已经使用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);                        
})
— Itazzad
source
1
这就是我一直在寻找的！感谢您指出引导程序的过渡时间！荣誉：D甚至也可以使用150 ：)
— ShellZero
4

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

不触发事件：show.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>
— 航空兵
source
3

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

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

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

该事件从未触发，因为它没有发生

我的解决方法是将div包含在html正文中

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

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

— 旅行大小
source
2

有时，如果出现以下情况，这将不起作用：

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

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

— 马吕斯
source
这对我有帮助-$('#myModal').on('show.bs.modal'...)需要在加载JQuery之后。谢谢！
— 伊恩·沃尔德
2

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

$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
       alert('hi')
    })
}
— 尤里·纳蒂维达德（Yuri Natividade）
source
1

确保您确实使用了引导程序jquery模式而不是其他jquery模式。

在这方面浪费了太多时间...

— 迪迪尔·克恩温
source
1

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

  1. 加载的jQuery
  2. 加载的引导程序
  3. 再次加载jQuery

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

— d00d
source
0

以我为例，问题是travelsize的注释方式。bootstrap.js和jquery之间的导入顺序。因为我使用的是Metronic模板，所以之前没有检查

— GregorioCenturión
source
0

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

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });
— 苏拉杰·古普塔
source
-1

以下是详细信息：

show.bs.modal在加载模型对话框时起作用show.bs.modal在加载后可以做任何事情。后期渲染

— 阿南德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.