在 jQuery UI 对话框中显示隐藏的 html答案

【问题标题】：Displaying hidden html in a jQuery UI Dialog在 jQuery UI 对话框中显示隐藏的 html
【发布时间】：2011-01-27 20:34:22
【问题描述】：

我正在使用 jQuery UI 的对话框。为了很好地将窗口包裹在我的内容周围，我必须首先在 2 个空的嵌套 div (<div><div></div></div>) 上加载对话框。然后，在打开对话框后，我用内容填充对话框。我花了很多时间……这不是这个问题的目的。请不要建议该机制的替代方案。

我的问题只是我需要在网页中显示 html，如下所示：

<div id="mydialog">
  <form>
    <label for="name">My name:</label>
    <input type="text" id="name" name="name"/>
  </form>
</div>

但是，我希望上面的 html 隐藏在网页上。所以我将css设置为display: none;。然后我对 Dialog 的内部 div 执行 .append($('#mydialog')).children().css('display', 'block');。

我的问题是...如何从网页中删除 html？通过做一个jQuery追加，我不是在制作一个完整的副本吗？我遇到了性能问题，因为我有很多这样的问题。而不是.append()，我应该做类似$('#mydialog').moveTo('#innerDivOfDialog');的事情吗？我应该在原始隐藏的 html 上做一个$('#mydialog').removeFromWebpage(); 吗？是否有执行 removeFromWebpage() 的 jQuery 方法？这里的正确机制是什么？

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-dialog

【解决方案1】：

来自jQuery append docs：

我们还可以选择页面上的一个元素并将其插入另一个：

$('.container').append($('h2'));

如果以这种方式选择的元素插入到其他地方，它将被移动到目标中

所以，它是被移动的，而不是被复制的。

如果您仍然对删除感兴趣，请参阅jQuery remove

【讨论】：

【解决方案2】：

您可以从 DOM 中删除这些元素（不是静态的 HTML，一旦它被客户端接收，但这实际上只是您所谓的东西的问题）您只需要调用 .detach() on移动的项目，然后再将其附加到您想要的位置。

$foo.append($('#mydialog').detach()).children().css('display', 'block');

【讨论】：