重建模式列表

Posted 2023-02-22

【中文标题】重建模式列表

【英文标题】：Rebuild Modals List

【发布时间】：2017-11-26 17:05:21

【问题描述】：

我正在创建一组页面，其中的部分由 ajax 动态加载。

每个加载的 ajax 页面只是 html 内容并包含一个模式。

我的 tinyMCE 编辑器也有同样的问题，但我已通过从 editors 数组中清除所有编辑器并重新加载它们来解决这个问题。

tinyMCE.editors = [];
tinyMCE.init();

我希望用 Bootstrap Modals 做一些类似的事情。我知道引导程序不知道更新的 DOM，并且在末尾放置一个脚本标签可以解决这个问题，但是这样做也会引入问题，因为脚本之前已经为页面的前面部分加载过（多个加载相同的脚本）。

我想要这样做的原因就是这个。

创建按钮以打开模式 模式打开 点击关闭或模态框上的 x，没有任何反应

结束代码：

<button type="button" class="close" data-dismiss="modal">&times;</button>

我的开箱密码：

<a href="#" id="adminAdd" class="adminClicks btn btn-sm btn-success" data-toggle="modal" data-target="#addModal">Add<span class="glyphicon glyphicon-plus"></span></a>

对话框 div：

<div id="addModal" class="modal fade" role="dialog">

任何建议都会很棒。我使用了一种模式，该模式在页面未被 ajax 更改的***别上正常工作。

【参考方案1】：

我想出了一个解决方法。

所以在不受 jquery 影响的静态代码中，我创建了这个：

<div id="customModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="customModalHeader"></h4>
            </div>
            <div class="modal-body" id="customModalBody">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pull-left">Add</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

然后我只需使用 jQuery 应用我需要的任何更改。我将 ID 添加到可变字段中，因此我通过以下方式进行调整：

$("customModalHeader").html("My custom header"); 

在脚本标签之间的 ajax 加载部分。我也可以包含一个脚本文件，但毕竟这是即时更改。