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元素不移到頁面底部，但仍將其移到底部。 就是這樣。