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

I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form. I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.

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

I created the following very simple code snippet to test as I went along:

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

<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

});

For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.

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

The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely. jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.

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

The overall project is in ASP.NET MVC 4, using Visual Studio 2013.

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

Any information would be greatly appreciated.

任何信息将不胜感激。

1 个解决方案

#1

So, finally discovered what's happening via this previously answered question:

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

Jquery Dialog - div disappears after initialization

Jquery对话框 - div在初始化后消失

//EDIT

//编辑

For any possible future usefuless -

对于任何可能的未来usefuless -

What was happening was that jQuery UI will move any DOM elements specified as Dialogs to the bottom of the page, rather than keep them in the location specified in the HTML markup. So, in my case, I was looking for things by class, but only within the scope of the app-email-openers parent app-email div.

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

To remedy this, I used templating (in my case, Razor) to add unique ids to each app-email-modal div, and added a data- attribute to associate the link with the specific unique id. This way they jQuery UI can move the elements as it sees fit, but there still easily accessible.

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

//END EDIT

//结束编辑

I feel like that functionality should be better spelled out in the documentation. Even their own example doesn't operate like this.

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

Corollary: I attempted to use the appendTo option to have the DOM elements not be shifted to the bottom of the page, but they're still moved to the bottom. So, there's that.

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

#1