jquery - 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 的模态中调用回调函数？

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 的回答，您应该尽可能避免超时。

来源： 官方 Bootstrap 文档

Answer 3

只是为第一个答案添加一点，这是因为当触发回调时，模态内部的 DOM 尚未完全加载，也许应该在这里做一些小技巧来阻止回调后的动作一段时间。希望能帮助到你！

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

Answer 4

我认为更好的是，使用“shown.bs.modal”它会在模态已加载完毕时触发。引导模式事件

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

Answer 5

用它包裹起来

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