title: Dynamic list-view population (three lists, one per page - all in same HTML)
body: <p>I have a single HTML page where I need to have three jqm <code>pages</code> (data-role=page) (named <code>#one</code>, <code>#two</code>, <code>#three</code>).  In each but page <code>#one</code>, I also have a back button in the header.  In each page, I have a simple <code>listview</code>.  On HTML generation, only the <code>listview</code> on page <code>#one</code> is populated.  On click of an item in the list, I perform some ajax to get the contents of the next list and populate it.  Everything works great until I click the back button and select a different item from the list.  The result is that the nicely formatted jqm <code>listview</code> becomes a vertical list of links, not jqm styled and colored horiz bars with content.</p>
  
  <p>My HTML and script is below.</p>
  
  <pre><code>&lt;div data-role="page" id="one"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Make&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;ul data-role="listview" data-theme="b" id="cutpoint_makes_mobile"&gt;
              @foreach (var make in Model)
              {
                  &lt;li&gt;&lt;a href="#"&gt;@make&lt;/a&gt;&lt;/li&gt;
              }
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="page" id="two"&gt;
      &lt;div data-role="header"&gt;
          &lt;a href="#one" data-role="button" data-icon="arrow-l"&gt;Back&lt;/a&gt;
          &lt;h1&gt;Model&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;ul data-role="listview" data-theme="b" id="cutpoint_models_mobile"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="page" id="three"&gt;
      &lt;div data-role="header"&gt;
          &lt;a href="#two" data-role="button" data-icon="arrow-l"&gt;Back&lt;/a&gt;
          &lt;h1&gt;Size&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;ul data-role="listview" data-theme="b" id="cutpoint_sizes_mobile"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="page" id="four"&gt;
      &lt;div data-role="header"&gt;
          &lt;a href="#three" data-role="button" data-icon="arrow-l"&gt;Back&lt;/a&gt;
          &lt;h1&gt;Details&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;h2 id="cutpoint_detail_mobile"&gt;
          &lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>... and the jquery code ...</p>
  
  <pre><code>var make = null;
  var model = null;
  
  $(document).ready(function () {
      $("#cutpoint_makes_mobile a").click(function () {
          make = $(this).text();
          loadAllModelsMobile_Request(make);
      });
      $("#cutpoint_models_mobile a").live("click", function () {
          model = $(this).text();
          loadAllSizesMobile_Request(make, model);
      });
      $("#cutpoint_sizes_mobile a").live("click", function () {
          var size = $(this).text();
          loadDetailsMobile_Request(make, model, size);
      });
  });
  
  // NOTE, only the load models ajax calls are listed for brevity
  // *** loadAllModelsMobile (Request/Response/Error) ***
  function loadAllModelsMobile_Request(make) {
      var qs = "make=" + make;
      var url = "/HomeJson/CutPointsAllModels";
      $.ajax({
          type: "POST",
          url: url,
          dataType: "json",
          data: qs,
          success: loadAllModelsMobile_Response,
          error: loadAllModelsMobile_Error
      });
  }
  function loadAllModelsMobile_Response(data) {
      if (data.Success) {
          $("#cutpoint_models_mobile").find("li").remove().end();
          model = null;
          $.each(data.Data, function () {
              $("#cutpoint_models_mobile").append('&lt;li&gt;&lt;a href="#"&gt;' + this + '&lt;/a&gt;&lt;/li&gt;');
          });
          $.mobile.changePage($("#two"));
      } else {
          // ToDo: handle errors
          //$("#admin_alert_msg").text(data.Data);
          //$("#dlg_admin_alert").dialog("open");
      }
  }
  function loadAllModelsMobile_Error(xhr) {
      // ToDo: handle errors
      //showAjaxErrorMessage("loadAllModelsMobile_Error", xhr.status, xhr.response);
  }
  </code></pre>
  
  <p>I even used the <code>pagebeforechange</code> event notification and cleared out the <code>li</code> in there, but no change (same as clearing out the <code>li</code> in the ajax response since that's before page change).</p>
  
  <p><strong>My question</strong>: how do I get jqm to style the list after it has already been styled once and I remove/replace its contents?</p>