title: Using jQuery Mobile, onload function not firing in HTML
body: <p>I have a <code>index.html</code> file with following syntax</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="occassion.html"&gt;
    &lt;img class="frametoicon" src="img/occasion.png" /&gt;
  &lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>then I have <code>occassion.html</code> page which has <code>body onload</code> function as follows</p>
  
  <pre><code>  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
   &lt;head&gt;
  &lt;title&gt;Occassion&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      function loaded() {
          alert("hii");
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="loaded()"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but <code>onload</code> function is not firing up....if I try to refresh the page (<code>occassion.html</code>) then <code>onload</code> function gets fired up... why it is not working when navigated from <code>index.html</code>?</p>
  
  <p>If I remove the jQuery files, then it works as expected....what I am missing to add?</p>
  
  <p>This is also not working</p>
  
  <pre><code> $(document).ready(function () {
          loaded();
      });
  </code></pre>
  
  <p>Edit</p>
  
  <p>I added </p>
  
  <pre><code> &lt;script&gt;
      $(document).bind("pagechange", function (event, data) {
          console.log(data);
          var toPage = data.toPage[0].id;
          alert(toPage);
          if (toPage == "page2")
              alert("hello");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and put the following in occassion.html</p>
  
  <pre><code>&lt;div data-role="page" id="page2"&gt;
   hello
   &lt;/div&gt;
  </code></pre>
  
  <p>To my surprise not even the alert(hello) is firing but also hello is also not displayed and alert(topage) is coming empty..</p>
  
  <p>How is it? what's missing</p>