twitter-bootstrap - Twitter引导模式事件未触发

Question

当模态窗口关闭但它不起作用时，我试图调用一个函数。

我的代码是：

<script type="text/javascript">

    $('#myModal').bind('hidden', function () {
        alert("blah");
    });

</script>

<div id="myModal" class="modal hide fade">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <br />
    Test
  </div>
  <div class="modal-body">
    <p>Modal body</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn primary">Primary</a>
    <a href="#" class="btn secondary">Secondary</a>
  </div>
</div>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modalbggg</button>

有任何想法吗？

Answer 1

您的代码完美运行。见这里：http: //jsfiddle.net/5sJYk/

确保您使用的是正确的 Twitter Bootstrap 和 jQuery 版本，并且正确调用它们。

Answer 2

Łukasz Niemier,

我遇到了同样的问题并找到了原因。定义事件函数时，myModal 尚未定义。因此，尝试将脚本移动到该行下方的任何位置

<div id="myModal" class="modal hide fade">

它会起作用的。

辛比尔斯克是正确的。您的代码在 jsfiddle 中完美运行。原因在jsfiddle，脚本在html内容的底部。

顺便说一句， on 和 bind 都可以工作。

编辑：最好的解决方案是将您的脚本包装在 ready 函数周围。然后你可以把它放在页面上的任何位置

$().ready(function () {

   $('#myModal').bind('hidden', function () {
        alert("blah");
    });
});

Answer 3

1. 文档说要使用on，而不是bind
2. 你确定你包括了所有的来源？

3. 为什么不使用 jQuery 的神奇功能：

   $(function() {
       $('#myModal').bind('hidden', function () {
           alert("blah");
       });
   });
   

Answer 4

$(function(){ // let all dom elements are loaded
    $('#mymodal').on('hide.bs.modal', function (e) {
        alert('event fired')
    });
});

Answer 5

您只需要为模态的 ID 声明一个变量。然后将其绑定到隐藏事件。

var $modal = $('#myModal');

$modal.on('hidden.bs.modal', function(e) {
   // console.log("modal is closed....");
});