title: Changing pages with jQuery Mobile
body: <p>
  I'm using jQuery Mobile to make an academic work. I am using a anchor with an event onclick and no href attribute to change from one page to another. This works without a problem but after loading a page it displays Error Loading Page pop up.
  </p>
  
  <p><p></p>
  
  <h2>This is an example of this behavior:</h2>
  
  <h3>testes.js:</h3>
  
  <pre>
  <code>
      function createAndChange(){
          var lol="&lt;div data-role='page' id='pg2'&gt;&lt;div data-role='header' data-backbtn='true'&gt;XPTO&lt;/div&gt;&lt;h1&gt;LOL&lt;/h1&gt;&lt;/div&gt;";
          $("body").append(lol);
          $("#pg2").bind("callback", function(e, args) {
              alert(args.mydata);
          });
          $.mobile.changePage($("#pg2"),"slide");
          $.mobile.updateHash('#pg2',true);
          $(page).trigger("callback", args);
      }
  </code>
  </pre>
  
  <h3>index.html:</h3>
  
  <pre>
  <code>
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;title&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="testes.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role="page"&gt;
              &lt;div data-role="header"&gt;header&lt;/div&gt;
  
              &lt;div data-role="content"&gt;
                  &lt;a onclick="createAndChange()"&gt;content&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div data-role="footer"&gt;footer&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  </code>
  </pre>
  
  <p>Thank you for your attention.</p>