动态插入JQuery Mobile滑块

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

for (var i = array_colors_available.length - 1; i >= 0; i--) { $('#insert_colors_slider').append('
 '+array_colors_available[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('
 '+array_colors_available[i]+' : '+'
'); $('#slider-'+i).slider(); if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value); }; 

我究竟做错了什么？ 当我不使用这些方法时，没有主题，当我使用它时，我有两个滑块而不是一个…谢谢！

Answer 1

这只是jQuery Mobile漏洞之一。 你的代码中也有错误，标签必须指向正确的滑块，而在你的例子中则不是这样。

可以通过两种方式创建动态滑块，其中没有一种包含slider()方法：

例1

在pagebeforecreate或pagecreate事件期间执行此pagebeforecreate 。

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

 $(document).on('pagebeforeshow', '#index', function(){ // Add a new input element $('[data-role="content"]').append(''); }); 

例2

在pagebeforeshow或pageshow事件期间执行此操作，并使用trigger('create')来设置滑块样式。

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

 $(document).on('pagebeforeshow', '#index', function(){ // Add a new input element $('[data-role="content"]').append('
'); $('[data-role="fieldcontain"]').append('
'); $('[data-role="controlgroup"]').append('Slider 2'); $('[data-role="controlgroup"]').append(''); // Enhance new input element, unfortunately slider() function is not goinf to work correctly //$('[type="range"]').slider(); $('#index').trigger('create'); }); 

在这个例子中，如果我们尝试使用slider()除了输入框之外，只有一切都是样式。

有关此内容和其他一些相关内容的更多信息可以在我的其他文章中找到，或者在此处找到。