title: Why won't my jQuery UI dialog show up when it's div is nested?
body: <p>I'm trying to show a dialog (div) that's inside another div. This way, I can easily keep all my dialogs together.</p>
  
  <p>The page looks something like this:</p>
  
  <pre><code>&lt;div id="bookshelf"&gt;
      &lt;div id="login"&gt;dialog&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've added the needed properties to it:</p>
  
  <pre><code>$("div#bookshelf div#login").dialog({ autoOpen: false });
  </code></pre>
  
  <p>and try to make it show up:</p>
  
  <pre><code>$("div#bookshelf div#login").dialog("open");
  </code></pre>
  
  <p>and it won't.</p>
  
  <p>However, if I change the last line to</p>
  
  <pre><code>$("div#login").dialog("open");
  </code></pre>
  
  <p>It does! But I don't want to refer to it directly, because propably something else on my page will be called "login" as well, at some point. And I wanted to stop making those very long id's like id="lp_dialogs_bookshelf_login".</p>
  
  <p>Am I doing something wrong here? Or should I just forget about it, and start using those nasty id's again?</p>