title: Ajax fetches data and loads menu from javaScript only after refreshing page
body: <pre><code>$('#subregionListPage').bind('pageinit', function(event){
  
  
      var output = $('#subregions');
      var region = getUrlVars()["reg"];
      $.ajax({
          url: 'http://localhost:8888/my/getsubregions.php',
          dataType: 'jsonp',
          cache: false,
          data: {reg: region},
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){
              var out = '';
              $.each(data, function(i,item){ 
                  out += '&lt;li&gt;&lt;a href="subregions.html"&gt;' + item.subregion.capitalize() + '&lt;/a&gt;&lt;/li&gt;';
              });
  
              output.append(out);
              output.trigger('create');
              output.listview('refresh');
  
          },
  
          error: function(){
              output.text('There was an error loading the data.');
          }
      });
  });
  
  String.prototype.capitalize = function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
  }
  
  function getUrlVars() {
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;');
      for(var i = 0; i &lt; hashes.length; i++)
      {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
      }
      return vars;
  }
  </code></pre>
  
  <p>So the problem with this code is that it creates list not after page is initially loaded, but after it is loaded and refreshed, I have tried many things but none of them worked.
  Also, this is html code from where the script is called.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="subregionListPage" data-role="page"&gt;
      &lt;script src="getsubregions2.js"&gt;&lt;/script&gt;
      &lt;div data-role="header" data-position="fixed"&gt;
          &lt;h1&gt;Select Sub Region&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
           &lt;ul id='subregions' data-role="listview"&gt;&lt;/ul&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Updated code after suggestion: </p>
  
  <pre><code>    $(document).on('pagecreate', '#subregionListPage', function(event){
  
      var output = $('#subregions');
      $.ajax({
          url: 'http://localhost:8888/my/getsubregions.php',
          dataType: 'jsonp',
          cache: false,
          data: {reg: $.urlParam('reg')},
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){        
              var out = '';
              $.each(data, function(i,item){ 
                  out += '&lt;li&gt;&lt;a href="subregions.html"&gt;' + item.subregion.capitalize() + '&lt;/a&gt;&lt;/li&gt;';
              });
  
  
              output.append(out);
              output.trigger('create');
              output.listview('refresh');
  
          },
  
          error: function(){
              output.text('There was an error loading the data.');
          }
      });
  });
  
  String.prototype.capitalize = function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
  }
  
  $.urlParam = function(name){
      var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
      if (results==null){
         return null;
      }
      else{
         return results[1] || 0;
      }
  }
  </code></pre>