Javascript 动态插入JQuery移动滑块

我正在动态插入滑块。问题是，当我动态插入它们时，它们没有jquerymobile的主题。 以下是我使用的代码：

for (var i = array_colors_available.length - 1; i >= 0; i--) {
        $('#insert_colors_slider').append('<div data-role="fieldcontain" ><fieldset data-role="controlgroup"> <label for="slider-8">'+array_colors_available[i]+' : '+'</label><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"></fieldset></div>');
        if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
    };

for（var i=array\u colors\u available.length-1；i>=0；i--）{
$（“#插入(颜色)滑块”）.append（“+array(颜色)可用[i]+”：“+”）；
if（array_slider_info_value！=null）$（'#slider-'+i）.val（array_slider_info_value[i+1].value）；
};

如果我使用JQueryMobile的方法，那么屏幕上会出现两个滑块：

for (var i = array_colors_available.length - 1; i >= 0; i--) {
        $('#insert_colors_slider').append('<div data-role="fieldcontain" ><fieldset data-role="controlgroup"> <label for="slider-8">'+array_colors_available[i]+' : '+'</label><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"></fieldset></div>');
        $('#slider-'+i).slider();
        if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
    };

for（var i=array\u colors\u available.length-1；i>=0；i--）{
$（“#插入(颜色)滑块”）.append（“+array(颜色)可用[i]+”：“+”）；
$（'#slider-'+i）.slider（）；
if（array_slider_info_value！=null）$（'#slider-'+i）.val（array_slider_info_value[i+1].value）；
};

我做错了什么？当我不使用的方法，没有主题，当我使用它，我有两个滑块，而不是一个。。。

---

谢谢

这只是jQuery手机的一个bug。代码中还有一个错误，标签必须指向正确的滑块，在您的示例中不是这样

动态滑块可以通过两种方式创建，其中没有一种包括

滑块（）

方法：

例1 在创建之前的

pagebefore

或

pagecreate

事件期间执行此操作

工作示例：

在本例中，如果尝试使用

滑块（）

，则除了输入框之外，所有内容都将是样式

---

有关此内容和其他相关内容的更多信息，请访问我的其他，或查找

生成的滑块的

id

s是什么？使用

.slider（“刷新”）在创建滑块后刷新滑块<代码>$（'#slider-'+i）.slider（）.slider（'refresh'）

@Jesse id是一个数字1,2,3…@Omar它仍然显示两个滑块…我认为如果您在JSFIDLE中重新创建它会更容易排除故障。这两个示例都会抛出JavaScript运行时错误（0x800c001c）。

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new input element
    $('[data-role="content"]').append('<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100"  />');
});

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new input element
    $('[data-role="content"]').append('<div data-role="fieldcontain"></div>');
    $('[data-role="fieldcontain"]').append('<fieldset data-role="controlgroup"></fieldset>');
    $('[data-role="controlgroup"]').append('<label for="slider-2">Slider 2</label>');
    $('[data-role="controlgroup"]').append('<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100"  />');
    // Enhance new input element, unfortunately slider() function is not goinf to work correctly
    //$('[type="range"]').slider();
    $('#index').trigger('create');
});