title: jQuery Mobile: Some scripts running, some not. Can't figure out why
body: <p>jQuery Mobile and loading additional scripts is killing me.  I've reviewed their documentation and I understand that their AJAX model causes some complexity, I've gotten some help from here to apply the info, but I still can't get everything to work consistently.  Here's an example:</p>
  
  <p>I have a page with 2 form fields, one for date and one for time.  I am calling the jQuery UI Datepicker on the date field and a 3rd party Timepicker on the time field (<a href="http://fgelinas.com/code/timepicker/" rel="nofollow">this timepicker</a>).  If I access the page directly or do a refresh, both run just fine.  But if I navigate to the page from elsewhere, only the datepicker runs.  They are both linked in my document head and both called on the page with <code>pageinit</code>.  Why does one work but not the other?</p>
  
  <p>Head:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if IE 8]&gt;               &lt;html class="no-js lt-ie9" lang="en" &gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en" &gt; &lt;!--&lt;![endif]--&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;Test Site&lt;/title&gt;
  
      &lt;!-- Make it Mobile friendly --&gt;
      &lt;meta name="HandheldFriendly" content="True"&gt;
      &lt;meta name="MobileOptimized" content="320"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="cleartype" content="on"&gt;
  
      &lt;!-- Stylesheets --&gt;
      &lt;link rel="stylesheet" href="_css/normalize.css" /&gt;
      &lt;link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" /&gt;
      &lt;link rel="stylesheet" href="_css/red_variant/red_variant.css" /&gt;
      &lt;link href="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="_css/foundation.css" /&gt;
      &lt;link rel="stylesheet" href="_css/main.css" /&gt;
  
      &lt;!-- jQuery Including UI and Mobile --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p>Form in question:</p>
  
  <pre><code>&lt;form&gt;
      &lt;label for="addAgendaDate" class="ui-hidden-accessible"&gt;Date:&lt;/label&gt;
  &lt;input name="addAgendaDate" id="addAgendaDate" placeholder="Date" value="" type="text"&gt;
      &lt;label for="addAgendaTime" class="ui-hidden-accessible"&gt;Time:&lt;/label&gt;
  &lt;input name="addAgendaTime" id="addAgendaTime" placeholder="Time" value="" type="text"&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
          $(document).on('pageinit', function(){       
              $( "#addAgendaTime" ).timepicker({
                  showPeriod: true,
                  showLeadingZero: true
              });
          });
  
          $(document).on('pageinit', function(){       
              $( "#addAgendaDate" ).datepicker();
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I missing that causes both to work on normal page load but only one to work on jQuery Mobile AJAX loading?</p>
  
  <hr>
  
  <p><strong>Resolved!</strong>  It took a month, but I finally wrapped my head around this.  Gajotres and Kevin B were instrumental in getting me to understand the underlying script use issues, but each of my script problems ended up having different <em>additional</em> problems:</p>
  
  <ul>
  <li>The date and time picker inconsistency below was actually due to a
  CSS issue with z-index.  Time picker <em>was</em> popping and working fine
  script-wise, but for some reason jQueryUI was setting its z-index
  inline to zero, which put it behind the mobile page overlay.  CSS
  override (had to do an !important) fixed that. </li>
  <li>Had an issue with
  jQuery Countdown which was an ID duplicate issue since I had a PHP
  include pulling the same footer into each page.  Changed to class to
  resolve.</li>
  </ul>