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() {...});

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

我不知道，但这是因为听众 - （“隐藏”，功能......） - 不再“束缚”了吗？我以为.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 btw，不确定这是否重要......

Answer 1

变化

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

到

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

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

无法解决这个问题 - 一切看起来还不错，但是有一些js被rails管道添加，所以我无法排除某些东西干扰了我的js。

现在使用jquery的原生模态。

Twitter bootstrap模态隐藏事件只触发一次

3 个答案:

这是Bootstrap