Question

我有一个从远程位置获取数据的引导对话框，它工作正常。我想在加载内容后执行一些js代码（通过ajax）。我试试

.on('shown.bs.modal', function...

但是这会在显示模态后立即触发，并在加载内容之前触发。提前谢谢

更新

这是显示模态

的链接

<a data-toggle="modal" data-target="#modalX" class="" href="path/to/data.html">
    some text
</a>

这是空模式（在ajax调用从“path / to / data.html”加载内容之前

<div class="modal fade" id="modalX" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
      <div class="modal-body">
          Cargando ... / Loading ...
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

js事件代码......

$('#modalX').on('shown.bs.modal', function () {
    //not good to use in on ajax load :(
})

Answer 1

好的，在使用远程选项加载数据时，引导程序员拒绝提供onload或loaded事件存在此问题。

所以解决这个问题的方法如下：

创建自定义/基本锚标记以触发模态打开

<a class="open-modal">
    Open Modal
</a>

您的模态容器

<div class="modal fade" id="modalX" tabindex="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ......
    ......
</div>

JS

$(document).ready(function(){
    $('a').on('click', '.open-modal', function(e){
        e.preventDefault();
        $('#modalX').modal({
            show: true,
            ....
        })
        .load('path/to/data.html', function(e){
            alert(e); // where e is the content
            // do what it is you need to do in here
        });
    });
});

更新

Bootstrap人似乎最终同意将loaded事件添加到版本3.1.0中的模态组件

现在你可以做..

$('#modalX').on('loaded.bs.modal', function (e) {
  // do something...
});

如何为bootstrap3对话框触发ajax onload / success事件

1 个答案:

更新