bootstrap3模态中的回调函数

Question

我对在 bootstrap3 的 javascript 模式中触发回调函数有点困惑。在正常的jquery.post 你可以这样做，

$.post('path', { something: something }, function(data) { 
  console.log(data);
});

但是在 bootstrap 3 modal 中，我通过脚本触发了 modal，我这样做是基于我如何理解他们网站上的解释。

$('selector').modal('show', function() { 
  //here comes the problem, I have a button in the modal in the html, my code
  //if the button was clicked inside this modal is..

  $('#myButton').on('click', function() { 
     console.log("this is a try");
  });
});

但遗憾的是，如果我单击按钮，什么都没有发生，控制台中也没有记录任何内容。如何在 bootstrap 3 的 modal 中调用回调函数？

Answer 1

对于 Bootstrap 3，事件现在已命名空间，因此模式的 show 事件将是 show.bs.modal...

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

演示：http://bootply.com/90952

Answer 2

@Skelly 是对的，你可以像这样使用show.bs.modal 事件：

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

官方文档说：

该事件在调用 show 实例方法时立即触发。

请注意，此事件“很快”会触发，您可能需要改用 shown.bs.modal。

有关此事件的文档：

当模式对用户可见时触发此事件（将等待 CSS 转换完成）​​。

这会影响@Keith yeoh's 的回答，您应该尽可能避免超时。

来源： Official Bootstrap documentation

Answer 3

对第一个答案稍微补充一点，这是因为当触发回调时，模态内部的 DOM 尚未完全加载，也许应该在这里做一些小技巧，以便在回调后暂停一段时间的操作。希望对您有所帮助！

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        // something here
    }, 300);
});

Answer 4

我认为更好的是，使用“shown.bs.modal”它会在模态加载完毕时触发。 Bootstrap modal events

$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal is allready shown');
});

Answer 5

用

包裹起来

$(window).on('load', function() {
    ...modal callback here.
});