title: JQuery Mobile Loses All Styles After Navigating Pages
body: <p>Im going through a serious headache, for the last few hours I cant figure out why when I flick between pages (dynamically loaded by ajax) that the styling all goes.</p>
  
  <p>I have read dozens of posts on the net about this, and have tried .page() trigger("Refresh") trigger create and many more.</p>
  
  <p>Page 1 has a list, on click of the item it fetches the complete contents of another list and put them into the DOM.</p>
  
  <p>JQuery Versions (mobile 1.1rc2 - but same issue with 1.0.1 stable):</p>
  
  <pre><code>&lt;script src="scripts/ajax.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"&gt;
  </code></pre>
  
  <p>This link is clicked on initial list:</p>
  
  <pre><code>javascript:GetGarageList("G9236")
  </code></pre>
  
  <p>which triggers :</p>
  
  <pre><code>// show garages for factor
  function GetGarageList(accNo) {
      $.mobile.showPageLoadingMsg("b", "Loading", false);
      $.ajax({
          type: "POST",
          url: "Default.aspx/GetGarageList",
          data: "{'accNo':'" + accNo + "'}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (msg) {
              $("#garageList").html(msg.d);
              $.mobile.changePage("#garageList");
          },
          error: function () {
              ShowError("Error :(");
          },
          complete: function () {
              $.mobile.hidePageLoadingMsg();
          }
      });
  };
  </code></pre>
  
  <p>On first load, the 2nd page looks perfect :</p>
  
  <p><img src="https://i.stack.imgur.com/WD6jG.png" alt="enter image description here"></p>
  
  <p>But when I press back button up top. Then click another link :</p>
  
  <pre><code>javascript:GetGarageList("G9336")
  </code></pre>
  
  <p>I get messed up view :</p>
  
  <p><img src="https://i.stack.imgur.com/6yEre.png" alt="enter image description here"></p>
  
  <p>Please help!</p>
  
  <p>EDIT :</p>
  
  <p>Others have used .trigger("create"); and say they solved the problem... but everytime I add that to my code like so :</p>
  
  <pre><code>$("#garageList").html(msg.d).trigger("create");
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$("#garageList").html(msg.d);
  $("#garageList").trigger("create");
  </code></pre>
  
  <p>It just gives me a loading spinner forever.</p>
  
  <p>EDIT 2:</p>
  
  <p>As per Barnes suggestion below I have changed the html as so :</p>
  
  <pre><code>    &lt;%--Garage List--%&gt;
      &lt;div data-role="page" id="garageList" data-add-back-btn="true" data-theme="a"&gt;
          &lt;div data-role='header' data-position='fixed'&gt;
              &lt;h1&gt;Garages&lt;/h1&gt;
              &lt;a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role='content' id="abc"&gt;
              &lt;ul data-role='listview' id='xyz' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'&gt;
  
  /// --&gt; new content goes here... as simply many &lt;li&gt; items.
  
  &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- /content --&gt;
      &lt;/div&gt; &lt;!-- /page --&gt;
  </code></pre>
  
  <p>Then I tried (in the ajax success):</p>
  
  <pre><code>            $("#xyz").empty();
              $("#xyz").html(msg.d);
              $("#abc").listview("refresh");
              $.mobile.changePage("#garageList");
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>            $("#xyz").html(msg.d);
              $("#xyz").listview("refresh");
              $.mobile.changePage("#garageList");
  </code></pre>
  
  <p>HERE is some sample output of msg.d :</p>
  
  <pre><code>"&lt;li&gt;&lt;a href='javascript:GetGarageDetails(16267)'&gt;&lt;h3&gt;A KETCHEN MOTOR ENGINEERS&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;MID LOTHIAN&lt;/strong&gt;&lt;/p&gt;&lt;/a&gt;&lt;a href="javascript:GetFactorDetails('16267')"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href='javascript:GetGarageDetails(16328)'&gt;&lt;h3&gt;G.A.AUTOS&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/a&gt;&lt;a href="javascript:GetFactorDetails('16328')"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href='javascript:GetGarageDetails(16262)'&gt;&lt;h3&gt;GARRY HENDERSON MOTOR ENGINEERS&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;WEST LIMTON&lt;/strong&gt;&lt;/p&gt;&lt;/a&gt;&lt;a href="javascript:GetFactorDetails('16262')"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href='javascript:GetGarageDetails(16264)'&gt;&lt;h3&gt;LEADBURN GARAGE LTD&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;PEELBLESHIRE&lt;/strong&gt;&lt;/p&gt;&lt;/a&gt;&lt;a href="javascript:GetFactorDetails('16264')"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href='javascript:GetGarageDetails(16315)'&gt;&lt;h3&gt;LOTHIAN MOTORS&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/a&gt;&lt;a href="javascript:GetFactorDetails('16315')"&gt;&lt;/a&gt;&lt;/li&gt;
  
  "
  </code></pre>
  
  <p>And other variations, but it still doesnt want to play (spinner goes on forever on refresh) ... although its improved a little (when I take the refresh out) :</p>
  
  <p><img src="https://i.stack.imgur.com/Rv3pE.png" alt="enter image description here"></p>