jQuery Mobile的滑块不滑动后动态HTML添加到DIV

我希望得到一个JSON回来的标题，在页面加载多个jQuery Mobile的滑块的值。我可以动态生成滑块HTMLS追加到div在页面上，并指定正确的值，但滑块不会滑动。我错过了什么？jQuery Mobile的滑块不滑动后动态HTML添加到DIV

HTML：

<div id="mySlider"> 
    </div> 
    <div id="mySliderHTML" style="display: none;"> 
     <span>#{CompName} 
      <input id='#{id}' name='#{id}' type="range" pattern="[0-9]*" min="0" max="10" data-highlight="true" 
       value="#{value}" data-show-value="true" data-popup-enabled="true" /> 
     </span> 
     <br /> 
</div>

的Javascript：

$(document).ready(function() { 
     $.getJSON('CompHandler.ashx', function (data) { 
      if (data.length > 0) { 
       var mySlider = $('#mySlider'); 
       $.each(data, function (index, json) { 
        var mySliderHTML = $('#mySliderHTML').html(), 
        cID = json.cid, 
        name = json.name, 
        compValue = json.value, 
        percent = compValue + "0%"; 
        htmlToAppend = mySliderHTML.replace(/#\{id\}/g, cID).replace(/#\{CompName\}/g, name).replace(/#\{value\}/g, compValue).replace("width: 0%", "width: " + percent).replace("left: 0%", "left: " + percent); 
        $('#' + cID).val = compValue; // This didn't do anything. 
        mySlider.append(htmlToAppend); 
       }); 

      } 
     }); 
    });

来源

2013-11-21 imObjCSwifting