title: jQuery Mobile multiple pages causing problems when calling a panel
body: <p>I have an HTML document with multiple pages using jQuery Mobile's <code>data-role="page"</code>. I am trying to call a panel on the second page but am receiving the error</p>
  
  <blockquote>
    <p>cannot read property 'nodeType' of undefined</p>
  </blockquote>
  
  <p>The error occurs when I try to transition to the second page. My basic page structure is as follows:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div data-role="page" id="page1"&gt;
          &lt;a href="#page2"&gt; Enter Page 2&lt;/a&gt;
      &lt;/div&gt;
      &lt;div data-role="page" id="page2"&gt;
          &lt;h3&gt; tthis is page 2 &lt;/h3&gt;
          &lt;input type="button" id="myButton"&gt; My Button &lt;/input&gt;
          &lt;div data-role="panel" id="myPanel"&gt;
              &lt;p&gt; Panel content &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The panel is being called through a function, but I still receive the same error when I comment out the function. </p>
  
  <pre><code>$(document).ready(function() {
      $('#myButton').on('click', function() {
          $('#myPanel').panel('open')
      })
  })
  </code></pre>
  
  <p>The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.</p>
  
  <p>Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.</p>