如何在关闭时删除所有 jQuery UI 对话框答案

【问题标题】：How to remove all of a jQuery UI dialog when it is closed如何在关闭时删除所有 jQuery UI 对话框
【发布时间】：2013-09-26 15:05:40
【问题描述】：

在我的主页上，我有一种可以打开和关闭的侧面板。侧面板通过 jQuery 的 load 函数加载到主页上的 div 中。

加载到此侧面板的部分内容是一个 div(myDialog)

当单击此侧面板中的按钮时，我会调用：

$("#myDialog").dialog({
  title : "Permission",
  width : 300,
  height : 200,
  modal : true
});

现在，如果我关闭侧面板并使用 jQuery 的空函数清除其内容。然后我选择所有并“查看源代码”jQuery 在正文底部添加的 html 仍然存在。当我重新打开侧面板并尝试打开同一个对话框时，这会导致问题，因为有两个 div（具有重复的 ID）。

我试过添加这个，但它不起作用：

close : function(){
    $("#myDialog").dialog("destroy");
}

如何清除 jQuery 添加到正文底部的 html？还是有更好的方法来做我想做的事情？

【问题讨论】：

您不应该有多个具有相同 ID 的元素。修复它可能会解决这里的问题。
我不做第二个，jQuery 做。显然，当我调用 $("#myDialog").dialog({...}) 时，它会复制 #myDialog 并将其添加到正文的末尾。
jQueryUI 不会复制，它实际上将 div 移动到正文的末尾，所以仍然只有其中一个。 jsfiddle.net/dchSr
这解释了很多。所以解决方案是在侧面板关闭时调用 $("#myDialog").remove() ，而不是在对话框关闭时调用。我对么？有什么方法可以让 jQuery 将其新版本放在侧面板中，这样我就不必手动删除它？
是的，这似乎可行。因为如果您在没有打开对话框的情况下关闭侧面板，它仍然会在那里。 jQuery 移动了 div，所以它不在原来的容器中，所以empty() 不会删除它。为了安全起见，我会打电话给$('#myDialog').dialog('destroy').remove()，以确保删除事件。

【解决方案1】：

$(this).dialog('destroy').remove()

【讨论】：

【解决方案2】：

jQueryUI 实际上在创建对话框时将 div 移动到 DOM 中的其他位置，从而将其从原始容器中移出。因此，如果您尝试在其原始容器上调用 empty()，它将无法正常工作。

您应该在侧面板关闭时删除对话框 div，而不是在对话框关闭时（如果对话框从未打开会怎样）。

【讨论】：

看起来他们正在为此提出一个更好的解决方案，其中对话框元素将返回到其原始位置blog.jqueryui.com/2011/09/dialog-api-redesign
酷，这应该让这样的问题更容易:-)

【解决方案3】：

您也只需要将其从 DOM 中删除。在你的 close 活动中试试这个：

$('#myDialog').dialog("destroy").remove();

【讨论】：

当我关闭 ajax 加载的内容并重新打开它时效果很好。但是现在它不允许我在不关闭/重新打开 ajax 内容的情况下多次打开对话框，因为它会删除原始 div 和 jQuery 制作的副本。

【解决方案4】：

当您关闭对话框时，它只会关闭该框，但内容不会清除.. 如果您使用

$(this).dialog('destroy').remove()

方法然后它将从 DOM 中删除对话框，因此您必须自己清除所有内容.. 或者当您重新打开对话框时，您必须清除所有数据

这个方法……试试看……

【讨论】：

【解决方案5】：

$("#myDialog").dialog("close") 不工作吗？

$('#myDialog').dialog("destroy").remove() 也应该是可能的。

失败了，为什么不使用类而不是 ID。这样重复就没有关系了。

【讨论】：