javascript - 单ajax页面仪表板上的jquery模态复制

Question

我遇到一个问题，在某个 ajax 请求中有 5 个 jquery 对话框。该页面不会重新加载，并且完全依赖于ajax。一旦这个特定的 ajax 请求加载了 5 个对话框，它们就会被初始化，并且插件会在对话框的页面底部添加必要的标记。我通过 ajax 离开该页面以转到另一个 ajax 请求。从模态生成的 html 仍然在页面上。如果我再次返回到具有这 5 个对话框的页面，它会在底部的 html 中添加另外 5 个模态，所以现在变成 10 个。在导航 ajax 页面时是否有一个好的方法来删除这些模态，或者我有跟踪它？有一些对话框是全局的，并且由每个 ajax 请求使用，因此全局删除也不起作用。

Answer 1

给每组对话框一个唯一的类 - 也许是“set”+一个唯一的、递增的变量。在递增变量之前，请在创建新对话框之前调用 $('.set' +incrementVal).dialog("destroy"); 来消除旧对话框。听起来可行吗？

例如:

globalIncrement = 0;
function createDialogs() {
    globalIncrement += 1;
    $('div#main').append('<div class="set' + globalIncrement + '">test Dialog</div>');
    if(globalIncrement > 1) {
        $('div.set' + (globalIncrement - 1)).dialog("destroy");
        //Also, remove the <div> from the DOM:
        $('div.set' + (globalIncrement - 1)).remove();
    }
}