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消失的对话框元素

回答

相关问题