title: Why Jquery Mobile code need refreshing for each page to work?
body: <p>I am having some problem on JQuery Mobile, I am very new to this, so maybe my question might seem a bit naive. </p>
  
  <p>I have 2 pages, 1 is the <code>index.html</code> then I have a <code>search.html</code>, I have a sidemenu plugin for both html. And I did autofocus for the <code>search.html</code>. And when I click a button to go from index to search. My sidemenu isn't put into format and also the autofocus doesn't work. Only when I refresh the page it works. I have included all the css, js in every html. And I also already loaded all the script at the start of the page. And if I refresh on the search page and hit back to go back to the index, then the index page is messed up, and I have to refresh that to make it work as well.</p>
  
  <p>Not sure why is that happening. </p>
  
  <p>This is the <code>search.html</code> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;body&gt;
      &lt;html&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" /&gt;
          &lt;link rel="stylesheet" href="css/account.css" /&gt;
          &lt;link rel="stylesheet" href="css/jquery.mmenu.css" /&gt;
          &lt;link rel="stylesheet" href="css/jquery.mmenu.all.css" /&gt;
          &lt;script src="js/jquery-1.11.1.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.mobile-1.4.4.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.mmenu.min.all.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="css/jquery.mmenu.fullscreen.css" /&gt;
          &lt;link rel="stylesheet" href="css/jquery.mmenu.positioning.css" /&gt;
          &lt;link rel="stylesheet" href="css/jquery.mmenu.themes.css" /&gt;
  
          &lt;script type="text/javascript"&gt;
          $(document).on('pageinit',function() {
              $("#menu").mmenu({
                  // options
               }, {
                  // configuration
                  offCanvas: {
                     pageNodetype: "section"
                  }
               });
          });
          &lt;/script&gt;
  
          &lt;script&gt;
          $(document).on('pageshow', function(){ 
              $("#searchinput").focus();
          });
          &lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
          $(document).on('pageinit', function() {
              $("#menu").mmenu({
                  classes: "mm-light"
              });
          });
          &lt;/script&gt;
  
          &lt;script&gt;
          $("#menu").mmenu({
              searchfield: false,
              counters: true
          });
  
          $("#my-button").click(function() {
              $("#menu").trigger("open");
          }); 
          &lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
          $.fn.mmenu.debug = function( msg ) {
              console.log( msg );
          };
          &lt;/script&gt;
  
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt; 
  
          &lt;div data-role="page" id="home"&gt;
              &lt;div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme=""&gt; 
              &lt;a  href="index.html" data-transition="none"&gt;Back&lt;/a&gt;
              &lt;input type="search" id="searchinput" name="search-mini"  value="" data-mini="true" placeholder="Where?"/&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;nav id="menu"&gt;
                  &lt;ul&gt;
                      &lt;li id="infinitytest.html"&gt;Home&lt;br&gt;&lt;a&gt;Test&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;My account&lt;/li&gt;
                      &lt;li&gt;Setting&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
           &lt;/div&gt;
  
           &lt;div&gt;
               &lt;div role="main" class="ui-content scroll"&gt;
                   &lt;ul data-role="listview" id="list"&gt;&lt;/ul&gt;
               &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>