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

});

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

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

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

非常感谢任何信息。

Answer 1

所以，最后通过之前回答的问题发现了正在发生的事情：

Jquery Dialog - div disappears after initialization

// EDIT

对于任何可能的未来usefuless -

发生的事情是jQuery UI会将指定为Dialogs的任何DOM元素移动到页面底部，而不是将它们保存在HTML标记中指定的位置。所以，在我的情况下，我一直在寻找类，但只在app-email-openers父app-email div的范围内。

为了解决这个问题，我使用了模板（在我的例子中，Razor）为每个app-email-modal div添加了唯一的id，并添加了一个data-attribute来将链接与特定的唯一id相关联。通过这种方式，jQuery UI可以根据需要移动元素，但仍然可以轻松访问。

// END EDIT

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

推论：我试图使用appendTo选项让DOM元素不会移到页面底部，但它们仍然会移到底部。那就是那个。

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

1 个答案: