Twitter bootstrap modal隐藏事件只触发一次

Question

我正在使用一个定义了单个模式的页面（“#agenda-modal”）。 当单击触发器 (.agenda-item) 时，我将显示这个带有远程内容的模式，如下所示：

$("body").on("click", ".agenda-question", function(e){
  var url = <build my url here>;
  $("#agenda-modal").modal({
    remote: url
  });
});

这很好用（我正在使用收听 $body.on 因为 .agenda-items 是通过 javascript 添加的）。

当模态关闭时，我想重新加载页面的一部分（模态内部的表单修改的部分）。所以我正在使用：

$("#agenda-modal").on("hidden", function(){
  alert("hidden");
});

当然，一切都在

$(function() {...});

这有效，但只有一次！当我第一次加载页面并单击触发器时，模式会加载并且当我关闭模式时会发生警报。如果我再次单击相同的触发器，模式会再次显示，但这次关闭警报时不会发生！

我不知道，但这是因为监听器 - on("hidden", function...) - 不再“绑定”了吗？我以为 .on 总能赶上事件？

模态代码直接来自推特：

<div class="modal hide fade" id="agenda-modal">
  <div class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

有什么想法吗？我真的很想在模态关闭时捕捉到，以便我可以更新页面中本应更改的部分。

顺便说一句，使用rails，不确定这是否重要......

Answer 1

无法解决这个问题 - 一切看起来都不错，但是 Rails 管道添加了相当多的 js，所以我不能排除某些东西干扰了我的 js 的可能性。

现在改用 jquery 的原生模式。

Answer 2

这是 Bootstrap 的一个已知问题

问题是事件需要在每次触发时重新添加，但会延迟。

这是一个例子：

function hiddenModal() {
    alert("hidden");
    setTimeout(function() {
        $("#agenda-modal").on("hidden", hiddenModal );
    }, 222);
}

$("#agenda-modal").on("hidden", hiddenModal );

---

这类似于另一个问题，但针对不同类型的事件：

• Radio buttons change() event only firing once when using $().button('reset')

Answer 3

改变

$("#agenda-modal").on("hidden", function() {
  alert("hidden");
});

到

$(document).on('hidden.bs.modal', '#agenda-modal', function () {    
  alert("hidden");
});