jQuery 移动游侠/滑块刷新不工作

Question

我正在开发一个基于 HTML5 & CSS & JS 的移动应用程序，由 jQuery 移动设备提供支持。

我正在以编程方式创建表单。我使用文本字段和游侠（滑块）。创建此输入后，它们没有样式。没问题。为了刷新文本字段样式，我使用：

$(selector).textinput();

.. 一切正常（当然只适用于输入="text"）。

但是如果我想刷新一个滑块（游侠），我使用这个：

$(selector).slider("refresh");

我得到一个错误：

Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'refresh'

好的。如果我改变这个：

$(selector).slider();

如果有效 50%：看：http://postimg.org/image/8upkakkc1/ ..

============================================= ======================

我的代码：

HTML:

<div data-role="page" id="newclass_step4_complete" data-title="newclass_step4_complete">
        <div data-role="content" style="background-color:#fff;">
                <form>
                    <ul data-role="listview" data-inset="true" id="zdup_ul">
                        <li><br><span style="font-size:50px;color:#FFA500;margin-top:50px;" id="compl_name"></span><hr></li>

                        <li id="dupa_ultimu">
                            <hr>
                            <div class="ui-grid-a">
                                <div class="ui-block-a"><button type="button" id="discardvalcrits" data-inline='true'><i class='lIcon fa fa-chevron-left'></i>Înapoi</button></div>
                                <div class="ui-block-b"><button type="button" id="btn_save_ok_vals" data-inline='false' style="color:green;"><i class='lIcon fa fa-check'></i> Salveaza</button></div>
                            </div>
                        </li>
                    </ul>
                </form>
        </div>
    </div>

JS:

$(document).on("click", ".comp_var_btn", function(event){                    

                var idus = $(this).attr("compvar");

                $("#compl_name").html(lista_variante[idus]);

                var biguscontent = "";
                $.each( lista_criterii, function( crit_id, crit_vals ) {
                    if(crit_vals['evaluare'] == "valmare_avmare")
                        biguscontent = biguscontent + '<li data-role="fieldcontain" id="cu_del_aici_'+crit_id+'"><label for="cmpvar_'+crit_id+'">'+crit_vals['nume']+':</label><input type="text" id="cmpvar_'+crit_id+'" value="" data-clear-btn="true" placeholder="Valoarea mare .. avantaj mare"></li>';
                    else if(crit_vals['evaluare'] == "valmic_avmare")
                        biguscontent = biguscontent + '<li data-role="fieldcontain" id="cu_del_aici_'+crit_id+'"><label for="cmpvar_'+crit_id+'">'+crit_vals['nume']+':</label><input type="text" id="cmpvar_'+crit_id+'" value="" data-clear-btn="true" placeholder="Valoarea mica .. avantaj mare"></li>';
                    else
                        biguscontent = biguscontent + '<li data-role="fieldcontain" id="cu_del_aici_'+crit_id+'"><label for="cmpvar_'+crit_id+'">'+crit_vals['nume']+':</label><input type="range" id="cmpvar_'+crit_id+'" value="5" min="1" max="10" data-highlight="true"></li>';                


                });
                $("#dupa_ultimu").before(biguscontent);

                window.location = "#newclass_step4_complete";

                if(prima_data_tata == 1){
                   // works ok
                    $('#zdup_ul').listview('refresh');
                    $.each( lista_criterii, function( crit_id, crit_vals ) {
                        if(crit_vals['evaluare'] == "valmare_avmare" || crit_vals['evaluare'] == "valmic_avmare"){
                             // works ok
                            $("#cmpvar_"+crit_id).textinput();
                        }
                        else{
                            // HERE BIG FAIL

                            //$("#cmpvar_"+crit_id).slider( "value", 6 );
                            //$("#cmpvar_"+crit_id).slider();
                            //$("#slider").slider('value',9);
                            $("#cmpvar_"+crit_id).slider("refresh");
                            //$("#cmpvar_"+crit_id).remove();
                        }
                    });
                } else prima_data_tata = 1;

            });

所以..？ :(

Answer 1

为了刷新输入类型范围，您需要做的就是覆盖它的值

你可以这样做：

$('input[type="range"]').val(newVal);

但这可能不适用于您的代码，因为您是从 JS 生成这些输入的

所以。首先，您需要获取 'biguscontent' 并将其分解为多个变量，其中一个是范围输入

你最终会得到这样的结果

var rangeInput = <input type="range" value="" min="" max="" />
var biguscontent = '<li>..' + rangeInput + '...</li>...';

然后您将能够单独定位输入并更改其值

$(rangeInput).val(newVal)

在这里您可以看到一个 fiddle，点击 http://jsfiddle.net/wpa5rqc7/

时范围输入 'refreshing'

jQuery 移动游侠/滑块刷新不工作

jQuery Mobile ranger / slider refresh not working

jquery

user-interface

mobile

slider

refresh