Popup not working within jquerymobile
<p>I'm a touch lost - I have taken a popup example from the jquery demo page as a template...</p>

<p>If I put my popup within the first page, it works - I can call it from within js script to open.</p>

<p>Thus... the following does work</p>

<pre><code>    &lt;div data-role="page" class="page" id="Menu"&gt;
    &lt;div data-role="header" data-position="fixed" class="ui-title center"&gt;
        &lt;div data-role="controlgroup" data-type="horizontal"&gt;
            &lt;a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#OrderList" class="ui-btn ui-corner-all width150 htitle OrderList"&gt;&amp;nbsp;&lt;span class='htitle'&gt;Barserver.com&lt;/span&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext"&gt;&amp;nbsp;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="MainContent"&gt;
        &lt;div id="MenuList"&gt;&lt;/div&gt;    
    &lt;/div&gt;
&lt;div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;"&gt;
        &lt;div data-role="header" data-theme="a"&gt;
        &lt;h1&gt;Delete Page?&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div role="main" class="ui-content"&gt;
            &lt;h3 class="ui-title"&gt;Are you sure you want to delete this page?&lt;/h3&gt;
        &lt;p&gt;This action cannot be undone.&lt;/p&gt;
            &lt;a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back"&gt;Cancel&lt;/a&gt;
            &lt;a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow"&gt;Delete&lt;/a&gt;
        &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I can dynamically open it via </p>

<pre><code>$("#popup").popup("open");
</code></pre>

<p>However if I move the popup to another (data-role) page within the same document, it does not get displayed, nor errors in console.log. Can anyone steer me forward? The following does NOT work...</p>

<pre><code>&lt;div data-role="page" class="page" id="OrderList"&gt;
    &lt;div data-role="header" data-position="fixed" class="ui-title text-center"&gt;
        &lt;div data-role="controlgroup" data-type="horizontal"&gt;
            &lt;a href="#Menu" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext Menu"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#Menu" class="ui-btn ui-corner-all width150 htitle Menu"&gt;&amp;nbsp;&lt;span class='htitle'&gt;Barserver.com&lt;/span&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#Customer" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext"&gt;&amp;nbsp;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="OrderListContent" class="productdhtml ui-content"&gt;&lt;/div&gt;
&lt;div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;"&gt;
            &lt;div data-role="header" data-theme="a"&gt;
            &lt;h1&gt;Delete Page?&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div role="main" class="ui-content"&gt;
                &lt;h3 class="ui-title"&gt;Are you sure you want to delete this page?&lt;/h3&gt;
            &lt;p&gt;This action cannot be undone.&lt;/p&gt;
                &lt;a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back"&gt;Cancel&lt;/a&gt;
                &lt;a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow"&gt;Delete&lt;/a&gt;
            &lt;/div&gt;
    &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>To avoid misunderstanding - the first code sample works, the second one does not work (meaning no errors, no modal like dialog box gets displayed).</p>

<p>Why?</p>

<p><em>(All help appreciated of course)</em></p>