7

我正在使用一个定义了单个模式的页面（“#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，不确定这是否重要......

4

3 回答 3

11

改变

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

至

$(document).on('hidden.bs.modal', '#agenda-modal', function () {    
  alert("hidden");
});
于 2015-04-07T20:51:08.523 回答
2

这是 Bootstrap 的一个已知问题

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

这是一个例子：

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

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

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

于 2014-07-06T07:29:43.427 回答
0

无法弄清楚 - 一切看起来都不错，但是 rails 管道添加了相当多的 js，所以我不能排除某些东西干扰了我的 js 的可能性。

现在改用 jquery 的本机模式。

于 2013-07-30T12:12:41.163 回答