title: How can I hide a div in JQuery mobile - current attempt hides div occasionally
body: <p>I am using jquery JQuery and want to hide div on page load. To do this I am using the following javascript (in the page)</p>
  
  <pre><code>$( document ).ready(function() {
      $('#some_div').hide();
      $('#some_btn').closest('.ui-btn').hide();
  });
  </code></pre>
  
  <p>When the page is loaded sometimes the div and button are hidden, and sometimes they are not. There doesn't seem to be any consistancy I can see that determines when they are/aren't hidden. This occurs when I navigate to the page using the JQM ajaxy loads for standard links and when I refresh the page. I am using Chrome (latest). Any ideas on what may be going wrong here?</p>
  
  <h2>Edit 1</h2>
  
  <p>As per request here's the html I'm using (which also includes @Omar suggestion of on pageshow)</p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;!--[if lt IE 7]&gt; &lt;html class="no-js ie6 oldie" lang="en"  &gt; &lt;![endif]--&gt;
      &lt;!--[if IE 7]&gt;    &lt;html class="no-js ie7 oldie" lang="en"  &gt; &lt;![endif]--&gt;
      &lt;!--[if IE 8]&gt;    &lt;html class="no-js ie8 oldie" lang="en"  &gt; &lt;![endif]--&gt;
      &lt;!--[if gt IE 8]&gt; &lt;html class="no-js" lang="en"  &gt; &lt;![endif]--&gt;
  
  
      &lt;head&gt;
         &lt;meta charset="utf-8"&gt;
         &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  
          &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
  
          &lt;link rel="stylesheet"  href="/static/jquery-ui-1.10.3.custom.min.css"&gt;
          &lt;link rel="stylesheet"  href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css"&gt;
  
          &lt;script src="/static/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"&gt;&lt;/script&gt;
          &lt;script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  
        &lt;!-- CSS: implied media="all" --&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div data-role="page" id = "main-page"&gt;
              &lt;div data-role="header" style="overflow:hidden;"&gt;
              &lt;/div&gt;
              &lt;div data-role="content"&gt;
                  &lt;div id = "some_div"&gt;
                      Test div
                  &lt;/div&gt;
                  &lt;button id = "some_btn"&gt;Test button&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          function hide_things()
          {
              $('#some_div').hide();
              $('#some_btn').closest('.ui-btn').hide();
          }
  
          $(document).on('pageshow', '#main-page', function () 
          { 
              hide_things();
           });
  
  
          $( document ).ready(function() {
              hide_things();
          });
  
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>