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

Question

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

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

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

score 113 · Accepted Answer

113

用这个：

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

于 2016-02-21T16:04:51.880 回答

score 85 · Accepted Answer

确保在实例化模态之前放置你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功能。

score 22 · Accepted Answer

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

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

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

score 13 · Accepted Answer

13

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

/// TODO EVENTS

});

于 2017-04-14T07:44:20.537 回答

score 12 · Accepted Answer

尝试这个

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

使用shown而不是show确保在函数和警报末尾有分号。

score 8 · Accepted Answer

添加这个：

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

score 6 · Accepted Answer

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

score 4 · Accepted Answer

当代码可能之前执行并且它没有显示时会发生这种情况，因此您可以为它添加 timeout() tp fire。

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

score 4 · Accepted Answer

就我而言，我错过了 .modal-dialog div

不触发事件：showed.bs.modal

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

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

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

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

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

我的另一个问题是，如果我将模态 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>

score 3 · Accepted Answer

3

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

于 2017-06-17T04:49:10.340 回答

score 2 · Accepted Answer

有时这在以下情况下不起作用：

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

当第二次加载 jQuery 时，它以某种方式破坏了对 bootstrap 的引用并且模式打开了，但是 on('shown.bs..') 方法从未触发。

score 1 · Accepted Answer

确保您真正使用引导jquery 模态而不是另一个 jquery 模态。

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

在某些情况下，流行的放置 a 的解决方案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
        });
    }
}

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

以下是详细信息：

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

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

20 回答 20

Related

Reference