Question

我正在尝试使用bootstrap modal显示on click特定buttons事件，这些事件是通过jQuery部分中的insertAfter()函数动态生成的。我有一个在悬停时给出边框的部分，同时点击部分按钮正在显示，你可以在following link中看到我已经放置了一个jQuery函数来生成按钮

$('#page-wrapper').find('[data-nitsid]').each( function () {

    var nits = $(this).data("nitsid");
    $("<div id='" + nits + "' class='clearfix' style='display: none;'><a href='#' class='btn btn-circle btn-sm default sorthandle'>Sort <i class='fa fa-arrows'></i></a><a href='#nitsedit" + nits + "' role='button' data-toggle='modal' class='btn btn-circle btn-sm default'> Edit <i class='fa fa-pencil-square-o'></i></a><a href='#clone" + nits + "' class='btn btn-circle btn-sm default'> Clone <i class='fa fa-clone'></i></a><a href='#delete" + nits + "' class='btn btn-circle btn-sm default'> Delete <i class='fa fa-trash'></i></a></div>").insertAfter(this);
});

相应地有一个模态：

<div class="modal fade modal-primary in" id="nitsedit3" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="nitseditlabel" style="padding-right: 17px;">
    <div class="modal-dialog" role="document" style="width: 300px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times fa-lg"></i></span></button>
                <h4 class="modal-title" id="portlets_modal_label">Navigation</h4>
            </div>
        <div class="modal-body" id="portlets_modal_body" style="height: auto; overflow: auto;">
        .
        .
        .
        </div>
            <div id="portlets_modal_footer" class="modal-footer">
                <button type="button" class="btn btn-primary">Add Pages</button>
            </div>
         </div>
     </div>
</div>

buttons无法显示modal，我可以看到id's都相同，我已正确包含bootstrap library，即使我尝试推送Z-index但我无法显示模态。我试图在JSBin Editor中运行并在那里工作。

Answer 1

我认为问题在于，由于您要动态添加这些锚点，您必须将click事件绑定到文档本身：

<强>的jQuery

$('document').on('click', 'a[data-toggle="modal"]', function() {
    var modalId = $(this).attr('href');
    $(modalId).modal('show');
});

Bootstrap模态错误

1 个答案: