¿Por qué no aparece el cuadro de diálogo de la interfaz de usuario jQuery cuando está anidado div?

Question

Estoy tratando de mostrar un cuadro de diálogo (div) que está dentro de otro div. De esta manera, puedo mantener todos mis diálogos juntos fácilmente.

La página se ve algo como esto:

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

He añadido las propiedades necesarias para que:

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

y tratar de hacer que se muestre:

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

y no lo hará

Sin embargo, si cambio de la última línea de

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

lo hace! Pero no quiero referirme a él directamente, porque probablemente otra cosa en mi página se llamará "inicio de sesión" también, en algún momento. Y quería dejar de hacer esos ID tan largos como id = "lp_dialogs_bookshelf_login".

¿Estoy haciendo algo mal aquí? ¿O debería olvidarlo y comenzar a usar esos desagradables id nuevamente?

Answer 1

Cuando creó el cuadro de diálogo, se movió esto:

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

Al final de su documento HTML, justo antes de </body>, por lo que el selector de $("div#bookshelf div#login") no lo encuentra ... porque no es adentro ya allí.

Yo sólo uso div#login en todos los casos, ya que debe ser único, pero para hacer su trabajo ejemplo, tiene que mover el cuadro de diálogo después de que se creó, como esto:

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