Warum wird mein jQuery UI-Dialogfeld nicht angezeigt, wenn div verschachtelt ist?

Question

Ich versuche, einen Dialog (div) zu zeigen, der in einem anderen div ist. Auf diese Weise kann ich einfach alle meine Dialoge zusammenhalten.

Die Seite sieht ungefähr wie folgt aus:

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

ich die benötigten Eigenschaften hinzugefügt haben:

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

und versuchen, es nach oben zeigen lassen:

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

und es wird nicht.

Allerdings, wenn ich die letzte Zeile

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

Es tut ändern! Aber ich möchte nicht direkt darauf verweisen, denn irgendwann wird irgendwann auch noch etwas auf meiner Seite "Login" heißen. Und ich wollte damit aufhören, diese sehr langen IDs wie id = "lp_dialogs_bookshelf_login" zu machen.

Mache ich hier etwas falsch? Oder sollte ich es einfach vergessen und anfangen, diese fiesen IDs wieder zu benutzen?

Answer 1

Wenn Sie den Dialog erstellt, bewegt es das:

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

Zum Ende des HTML-Dokuments, kurz vor </body>, so dass die Wähler $("div#bookshelf div#login") es nicht finden ... weil es nicht drinnen dort mehr.

Ich würde nur div#login verwenden in allen Fällen, da es eindeutig sein sollte, aber Ihr Beispiel funktioniert, müssen Sie den Dialog bewegen, nachdem es erstellt wird, wie folgt aus:

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