Twitter引导模式事件未触发答案

【问题标题】：Twitter bootstrap modal event not firingTwitter引导模式事件未触发
【发布时间】：2012-09-18 23:54:05
【问题描述】：

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

我的代码是：

<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>

有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

乌卡斯·尼迈尔，

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

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

它会起作用的。

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

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

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

$().ready(function () {

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

【讨论】：

【解决方案3】：

Documentation 说使用 on，而不是 bind
您确定包含所有来源？

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：