jQuery UI 对话框：对话框元素从 DOM 中消失答案

【问题标题】：jQuery UI Dialog: Dialog Element Disappearing from the DOMjQuery UI 对话框：对话框元素从 DOM 中消失
【发布时间】：2014-08-29 15:12:53
【问题描述】：

我正在做一个项目，我正在尝试创建一个模式对话框“弹出”来捕获表单中的数据。我以前没有使用过 jQuery UI 的 Dialog 小部件，但我和其他人一起工作过，这看起来很简单。

我创建了以下非常简单的代码 sn-p 来测试：

<div class="app-email">
    <div>
        <a href="#"
           class="app-email-opener">
            Click to add or edit your e-mail settings.
        </a>
    </div>
    <div class="app-email-modal">
        Oh, Hai.
    </div>

</div>

$('.content').on({
    click: function () {
        console.log('I was totes clicked.');

        var parent = $(this).parents('.app-email');
        console.log(parent);

        var target = parent.find('.app-email-modal');
        console.log(target);

        $(target).dialog('open');
    }
}, '.app-email-opener');

$('.app-email-modal').dialog({
    autoOpen: false,
    modal: true,
    show: false

});

供参考：'content' 类是一个更高级别的块，用于捕获委托事件，而不必一直向上 DOM。

我遇到的问题是 class="app-email-modal" 的 div 似乎闪现到页面上，然后完全从 DOM 中消失。因此，jQuery 无法找到它并做任何事情，因为那时它根本不存在。

整个项目在 ASP.NET MVC 4 中，使用 Visual Studio 2013。

任何信息将不胜感激。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

所以，终于通过这个先前回答的问题发现了发生了什么：

Jquery Dialog - div disappears after initialization

//编辑

对于任何可能的未来有用 -

发生的情况是，jQuery UI 会将任何指定为对话框的 DOM 元素移动到页面底部，而不是将它们保留在 HTML 标记中指定的位置。因此，就我而言，我是按类查找内容，但仅限于 app-email-openers 父 app-email div 的范围内。

为了解决这个问题，我使用模板（在我的例子中是 Razor）为每个 app-email-modal div 添加唯一 ID，并添加一个 data- 属性以将链接与特定唯一 ID 相关联。这样他们的 jQuery UI 可以移动它认为合适的元素，但仍然很容易访问。

//结束编辑

我觉得应该在文档中更好地说明该功能。甚至他们自己的例子也不是这样操作的。

推论：我尝试使用 appendTo 选项让 DOM 元素不移动到页面底部，但它们仍然移动到底部。所以，就是这样。

【讨论】：