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


bootstrap jquery show.bs.modal event won't fire

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

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

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

用这个：

1
2
3
$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
相关讨论

确保在实例化弹出窗口之前先放置on('shown.bs.modal')

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

要么

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

要专注于某个字段，最好使用shown.bs.modal代替show.bs.modal，但是出于其他原因，您可能想隐藏背景或在模态开始显示之前进行设置，请使用show.bs.modal函数。

相关讨论

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

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

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

1
2
3
4
5
$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});
相关讨论

尝试这个

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

使用shown代替show还要确保在函数结尾处有半冒号并发出警报。

相关讨论

添加：

1
2
3
4
5
$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});
相关讨论

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

Bootstrap使用以下超时完成显示：

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

因此，使用300多个必须可行，而对我来说200可行：

1
2
3
4
5
$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
相关讨论

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
<body>
   
       ...
   
   
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
   
</body>

请记住将脚本放在" js / bootstrap"调用之后，而不是之前。

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

不触发事件：show.bs.modal

1
2
3
  <p>
Loading...
</p>

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

1
2
3
    <p>
Loading...
</p>

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

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

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

相关讨论

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

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

1
2
3
4
5
$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
       alert('hi')
    })
}

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

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

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

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

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

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

以下是详细信息：

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