Почему диалоговое окно jQuery UI не отображается, когда он вложен в div?

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 = "lp_dialogs_bookshelf_login".

Я что-то здесь не так делаю? Или я должен просто забыть об этом и снова начать использовать эти противные идентификаторы?

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');