如果通过ajax加载，如何在引导程序中打开模式？

Question

我在div处通过Ajax调用模态。 加载div及其模态后，该按钮将不会打开模态。 下面的代码是模式结构，它只是bootstrap中的普通模式 ，并且已通过ajax加载：

<div class="ajax-loaded-item">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="myModalZ">Large modal</button>

 <div class="modal fade" id="myModalZ" tabindex="-1" role="dialog" aria-labelledby="myModalLabelZ" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="myModalLabelS">Filter our work</h2>
            </div>
            <div class="modal-body">
                Content.....
            </div>
        </div>
    </div>
 </div>
</div>

如果是这种情况，我需要在现在通过ajax加载内容的情况下重新加载模态jQuery的bootstrap.js，是否可以在自己的ajax回调之后执行某种init模态调用？

Answer 1

您可以使用jQuery打开模式：

$(document).ready(function(){
    $('button[data-target="myModalZ"]').click(function(){
        $('#myModalZ').modal('show');
    });
});

更多文档在这里 。

编辑：

$(document).ready(function(){
    $('button[data-target="myModalZ"]').click(function(){
        if($('#myModalZ').length){
           $('#myModalZ').modal('show');
        } else {
           alert('Your message');
        }
    });
});

Answer 2

首先将接收到的内容附加到体内某处。 然后手动触发模态。

$.ajax(
    {
        url: "http://www.example.com/someAPI", 
        success: function(result){
            // Append content somewhere

            // Init button click event once your content is ready
            $('button[data-target="myModalZ"]').click(function(){
                $('#myModalZ').modal('show');
            });

    }
});

请在此处查看完整的文档 。