Почему мой диалог jQuery UI не появляется, когда он является вложенным?

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

Это делает! Но я не хочу ссылаться на него напрямую, потому что в какой-то момент возможно что-то еще на моей странице будет называться «login». И я хотел прекратить делать эти очень длинные id как 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');