Why won't my jQuery UI dialog show up when it's div is nested?

Question

I'm trying to show a dialog (div) that's inside another div. This way, I can easily keep all my dialogs together.

The page looks something like this:

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

I've added the needed properties to it:

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

and try to make it show up:

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

and it won't.

However, if I change the last line to

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

It does! But I don't want to refer to it directly, because propably something else on my page will be called "login" as well, at some point. And I wanted to stop making those very long id's like id="lp_dialogs_bookshelf_login".

Am I doing something wrong here? Or should I just forget about it, and start using those nasty id's again?

Answer 1

When you created the dialog, it moved this:

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

To the end of your html document, just before </body>, so the selector $("div#bookshelf div#login") doesn't find it...because it isn't inside there anymore.

I would just use div#login in all cases since it should be unique, but to make your example work, you need to move the dialog after it's created, like this:

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