为什么我的jQuery UI对话框在嵌套div时不显示？

Question

我正在尝试显示另一个div内的对话框（div）。通过这种方式，我可以轻松地将所有对话框保持在一起。

该页面如下所示：

<div id="bookshelf">
    <div id="login">dialog</div>
</div>

我已经为它添加了所需的属性：

$("div#bookshelf div#login").dialog({ autoOpen: false });

并尝试让它显示出来：

$("div#bookshelf div#login").dialog("open");

它不会。

但是，如果我将最后一行更改为

$("div#login").dialog("open");

确实如此！但是我不想直接引用它，因为我的页面上的其他内容在某些时候也会被称为“登录”。而且我想停止制作像id =“lp_dialogs_bookshelf_login”那样长的id。

我在这里做错了吗？或者我应该忘记它，并再次开始使用那些讨厌的id？

Answer 1

创建对话框时，它移动了它：

<div id="login">dialog</div>

在html文档的末尾，就在</body>之前，所以选择器$("div#bookshelf div#login")找不到它......因为它不再在那里了。

我会在所有情况下都使用div#login，因为它应该是唯一的，但为了让你的例子有效，你需要在创建对话框之后移动它，如下所示：

$("div#bookshelf div#login").dialog({ autoOpen: false })
                            .parent().appendTo('#bookself');