javascript - 动态插入的 JQuery Mobile slider

Question

我正在动态插入 slider 。问题是当我动态插入它们时，它们没有 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);
    };

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

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);
    };

我做错了什么？当我不使用这些方法时，没有主题，当我使用它时，我有两个 slider 而不是一个......谢谢!

Answer 1

这只是 jQuery Mobile 错误之一。您的代码中也有错误，标签必须指向正确的 slider ，而在您的示例中并非如此。

动态 slider 可以通过两种方式创建，它们都不包括 slider() 方法:

例子1

在期间做pagebeforecreate 或 pagecreate 事件。

工作示例:http://jsfiddle.net/Gajotres/caCsf/

$(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"  />');
});

例子2

在期间做pagebeforeshow 或 pageshow 事件和使用 trigger('create') 设置 slider 样式。

工作示例:http://jsfiddle.net/Gajotres/NwMLP/

$(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');
});

在这个例子中，如果我们尝试使用 slider() 只有输入框除外的所有内容都是样式。

有关此内容和其他一些相关内容的更多信息，请参阅我的其他 ARTICLE ，或找到它 HERE 。