Perché la mia finestra di dialogo dell'interfaccia utente jQuery non compare quando è div nidificata?

Question

Sto provando a mostrare una finestra di dialogo (div) all'interno di un altro div. In questo modo, posso facilmente tenere tutti i miei dialoghi insieme.

La pagina simile a questa:

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

ho aggiunto le proprietà necessarie ad esso:

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

e cercare di renderlo presentarsi:

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

e non lo farà.

Tuttavia, se cambio l'ultima riga di

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

lo fa! Ma non voglio riferirmi direttamente, perché probabilmente qualcos'altro sulla mia pagina verrà chiamato "login", ad un certo punto. E volevo smettere di creare id molto lunghi come id = "lp_dialogs_bookshelf_login".

Sto facendo qualcosa di sbagliato qui? O dovrei semplicemente dimenticarmene e ricominciare a usare quei cattivi id?

Answer 1

Quando hai creato la finestra di dialogo, si è trasferita in questo modo:

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

Alla fine del documento HTML, poco prima </body>, quindi il selettore $("div#bookshelf div#login") non lo trova ... perché non è là dentro più.

mi basta usare div#login in tutti i casi in quanto dovrebbe essere unico, ma per rendere il vostro lavoro ad esempio, è necessario spostare la finestra di dialogo dopo che è creato, in questo modo:

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