title: How to add slider to listview with jquerymobile
body: <p>I'm trying to add a slider to a listview when I click the button, but the slider lost css! 
  I try to make refresh to the listview but it didn't work.
  What I doing wrong?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div data-role="page" id="pageone"&gt;
    &lt;div data-role="header"&gt;
      &lt;h1&gt;Insert Page Title Here&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div data-role="content"&gt;
      &lt;button id="btn-insert"&gt;Insert&lt;/button&gt;
      &lt;ul id="events-list" data-role="listview" data-autodividers="false" data-filter="false" data-inset="true" data-theme="a" data-divider-theme="a"&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div data-role="footer"&gt;
      &lt;h1&gt;Insert Footer Text Here&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).on("pageinit", "#pageone", function (event) {
  
      $("#btn-insert").click(function(e) {
          var output = "&lt;select name=\"bluetooth-flip-connect\" id=\"bluetooth-flip-connect\" data-role=\"slider\" data-theme=\"b\" data-track-theme=\"b\" data-address=\"123\" &gt;";
          output += "&lt;option value=\"off\"&gt;off&lt;/option&gt;";
          output += "&lt;option value=\"on\" &gt;on&lt;/option&gt;";
          output += "&lt;/select&gt;";
  
          $("#events-list").append("&lt;li&gt;Teste" + output + "&lt;/li&gt;");
  
          $("#events-list").listview("refresh");
          $("select").slider("refresh");
  
      });
  });
  </code></pre>