title: $.mobile.changePage not working properly in multipage
body: <p>Hi all I am navigating from index.html to test.html as <code>$.mobile.changePage("test.html", {transition : "slide"});</code>  which works fine. But in my test.html there are multiple html pages in different div. In test.html I am calling different html page which is in different div in same html file (i.e.test.html ) as <code>$.mobile.changePage("#secondtestPage", {transition : "slide"});</code>  But here it is not navigate to secondtestPage.  My index.html is as:</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;title&gt;jQuery Mobile: Demos and Documentation&lt;/title&gt;
  
      &lt;link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" /&gt;
      &lt;link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /&gt;
      &lt;link rel="stylesheet" href="docsdemos-style-override.css" /&gt;
      &lt;script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"&gt;&lt;/script&gt;
      &lt;!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) --&gt;
      &lt;!-- &lt;script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"&gt;&lt;/script&gt;--&gt;
  
  
  &lt;/head&gt; 
  &lt;body&gt; 
      &lt;div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" &gt;
  
              &lt;div data-role="button"&gt;
                  &lt;input type="submit" data-role="button" value="firstPage" id="firstPage"&gt;
              &lt;/div&gt;
  
  
  
      &lt;/div&gt;  
  
  
      &lt;script type="text/javascript"&gt;
                  function callSecondPage()
                  {
                      alert ("Ins ide callPage");
  
                      //$.mobile.changePage('#secondPage');
                      $.mobile.changePage("test.html", {transition : "slide"});
  
  
                  }
              &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now page navigate to test.html and my test.html looks as:</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;title&gt;jQuery Mobile: Demos and Documentation&lt;/title&gt;
  
          &lt;link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" /&gt;
          &lt;link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /&gt;
          &lt;link rel="stylesheet" href="docsdemos-style-override.css" /&gt;
          &lt;script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"&gt;&lt;/script&gt;
          &lt;!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) --&gt;
          &lt;!-- &lt;script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"&gt;&lt;/script&gt;--&gt;
  
  
      &lt;/head&gt; 
      &lt;body&gt; 
          &lt;div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" &gt;
  
                  &lt;div data-role="button"&gt;
                      &lt;input type="submit" data-role="button" value="firsttestPage" id="firsttestPage"&gt;
                  &lt;/div&gt;
  
                  &lt;script type="text/javascript"&gt;
                      function callnewSecondPage()
                      {
                          alert ("Inside callPage");
  
                          //$.mobile.changePage('#secondPage');
                          $.mobile.changePage("#secondtestPage", {transition : "slide"});
                          //$.mobile.changePage("index.html", {transition : "slide"});
  
  
                      }
                  &lt;/script&gt;
  
          &lt;/div&gt;
  
          &lt;div data-role="page" id="secondtestPage"  onclick=callThirdPage() class="type-home" data-ajax="false" &gt;
  
                  &lt;div data-role="button"&gt;
                      &lt;input type="submit" data-role="button" value="secondtestPage" id="secondtestPage"&gt;
                  &lt;/div&gt;
  
                  &lt;script type="text/javascript"&gt;
                      function callThirdPage()
                      {
                          alert ("Inside callPage");
  
                          $.mobile.changePage('#thirdtestPage');
  
                      }
                  &lt;/script&gt;
  
          &lt;/div&gt;
  
          &lt;div data-role="page" id="thirdtestPage"  onclick=callFourthPage() class="type-home"&gt;
  
                  &lt;div data-role="button"&gt;
                      &lt;input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage"&gt;
                  &lt;/div&gt;
  
                  &lt;script type="text/javascript"&gt;
                      function callFourthPage()
                      {
                          alert ("Inside callPage");
  
                          $.mobile.changePage('#fourthtestPage');
  
                      }
                  &lt;/script&gt;
  
          &lt;/div&gt;
  
          &lt;div data-role="page" id="fourthtestPage" class="type-home"&gt;
  
                  &lt;div data-role="button"&gt;
                      &lt;input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage"&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div data-role="page" id="fifthtestPage" class="type-home"&gt;
  
                  &lt;div data-role="button"&gt;
                      &lt;input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage"&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div data-role="page" id="sixthtestPage" class="type-home"&gt;
  
                  &lt;div data-role="button"&gt;
                      &lt;input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage"&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But now on click of button it is not navigating to "callSecondPage". and if I call <code>$.mobile.changePage("index.html", {transition : "slide"});</code>  then it navigate to index.html properly, then why in multipage changePage is not working?  one more thing If I replace index.html code with test.html code then <code>$.mobile.changePage("#secondtestPage", {transition : "slide"});</code> works perfectly.</p>
  
  <p>I am confused why it is behaving like this? Any suggestion will be appreciated. Thanks in advance. </p>