jQuery UI對話框：從DOM消失的對話框元素

我正在開發一個項目，並試圖創建一個模式對話框「彈出窗口」來捕獲表單中的數據。我以前沒有使用過jQuery UI的對話窗口小部件，但是我和其他人一起工作過，看起來很簡單。jQuery UI對話框：從DOM消失的對話框元素

我創建了下面的非常簡單的代碼片段來測試，我就跟着去了：

<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無法找到它並做任何事情，因爲那時它根本不存在。

整個項目是在ASP.NET MVC 4，使用Visual Studio 2013年

的任何信息，將不勝感激。

來源

2014-08-29 Thomas Preston

所以，最後發現什麼通過這種以前回答問題發生：

Jquery Dialog - div disappears after initialization

//編輯

對於任何可能的未來usefuless -

正在發生的事情是，jQuery UI的意志將指定爲對話框的任何DOM元素移動到頁面的底部，而不是將它們保留在HTML標記中指定的位置。所以，就我而言，我一直在按類查找東西，但只能在app-email-openers父app-email div的範圍內。

爲了解決這個問題，我使用了模板（在我的情況下爲Razor）爲每個app-email-modal div添加唯一的id，並添加了一個data屬性來將鏈接與特定的唯一ID相關聯。通過這種方式，他們可以將jQuery UI移動到合適的位置，但仍然可以輕鬆訪問。

// END EDIT

我覺得這樣的功能應該在文檔中更好地拼寫出來。即使他們自己的例子也不是這樣操作的。

推論：我試圖使用appendTo選項讓DOM元素不會移動到頁面底部，但它們仍然移動到底部。所以，就是這樣。

來源

2014-08-29 15:42:32

jQuery UI對話框：從DOM消失的對話框元素

回答

相關問題