jquery - 为什么当 div 嵌套时我的 jQuery UI 对话框不会显示？

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，例如 id="lp_dialogs_bookshelf_login"。

我在这里做错了什么吗？或者我应该忘记它，然后再次开始使用那些令人讨厌的 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');