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

Question

我正在一个项目上，正在尝试创建一个模式对话框“弹出窗口”以捕获表单中的数据。 我以前没有使用过jQuery UI的Dialog小部件，但是我已经与其他人合作过，而且看起来很简单。

我创建了以下非常简单的代码片段以进行测试：

<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

});

供参考：“内容”类是一个较高级别的块，可以捕获委托事件，而不必一直深入到DOM。

我遇到的问题是，带有class =“ app-email-modal”的div似乎闪烁到页面上，然后完全从DOM中消失。 因此，jQuery无法找到它并执行任何操作，因为那时它根本不存在。

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

任何信息将不胜感激。

Answer 1

因此，终于通过先前回答的问题发现了什么情况：

jQuery对话框-初始化后div消失

//编辑

对于将来可能有用的-

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

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

//结束编辑

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

结论：我试图使用appendTo选项使DOM元素不移到页面底部，但仍将其移到底部。 就是这样。