title: JQuery Mobile sliders inserted dynamically
body: <p>I'm inserting sliders dynamically. The problem it's that when I insert them dynamically they don't have the theme of jquerymobile.
  Here's the code i use:</p>
  
  <pre><code>for (var i = array_colors_available.length - 1; i &gt;= 0; i--) {
          $('#insert_colors_slider').append('&lt;div data-role="fieldcontain" &gt;&lt;fieldset data-role="controlgroup"&gt; &lt;label for="slider-8"&gt;'+array_colors_available[i]+' : '+'&lt;/label&gt;&lt;input id=slider-'+i+' type="range" name='+array_colors_available[i]+' value="0" min="0" max="25" data-highlight="true" data-theme=c data-track-theme="f"&gt;&lt;/fieldset&gt;&lt;/div&gt;');
          if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
      };
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/5z6EJ.png" alt="enter image description here"></p>
  
  <p>And if I use the methods of JQueryMobile then on the screen appear two sliders:</p>
  
  <pre><code>for (var i = array_colors_available.length - 1; i &gt;= 0; i--) {
          $('#insert_colors_slider').append('&lt;div data-role="fieldcontain" &gt;&lt;fieldset data-role="controlgroup"&gt; &lt;label for="slider-8"&gt;'+array_colors_available[i]+' : '+'&lt;/label&gt;&lt;input id=slider-'+i+' type="range" name='+array_colors_available[i]+' value="0" min="0" max="25" data-highlight="true" data-theme=c data-track-theme="f"&gt;&lt;/fieldset&gt;&lt;/div&gt;');
          $('#slider-'+i).slider();
          if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
      };
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/4lAOD.png" alt="enter image description here"></p>
  
  <p>What am I doing wrong? When I don't use the methods there's no theme and when I use it I have two sliders instead of one...
  Thanks!</p>