Jquery Mobile,滑块在值更改后不会刷新

Question

我有一点问题,我正在使用localstorage并加载一个值,我的想法是滑块随该值改变.我得到了正确的负载部分,它加载了我想要的数字(我可以在警报中显示它,所以我知道是可以的),但是当试图将滑块添加到该数字时,它只保留dafult值(我尝试停用它,问题是一样的).页面就绪时运行该方法这是代码:

function mostrarValoresOpcionesGuardados()
{

    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    var nombre = localStorage.getItem(localStorageKey1);
    var peso = localStorage.getItem(localStorageKey2);
    var altura = localStorage.getItem(localStorageKey3);
    var edad = localStorage.getItem(localStorageKey4);
    $("#nombreUsuarioOpciones").val(nombre);
    $("#pesoUsuario").val(peso).slider("refresh"); //this doesn't work
    $("#alturaUsuario").val(altura);
    $("#edadUsuario").val(edad);
    alert(nombre+" "+peso+" "+altura+" "+edad);
};

我也尝试过这种方式: $("#pesoUsuario").val(peso); $("#pesoUsuario).slider("refresh")); 但它也没有用.这是滑块的div:

<div data-role="fieldcontain">
        <label for="pesoUsuario">
            Peso (kg)
        </label>
        <input id="pesoUsuario" type="range" name="pesoUsuario" value="95" min="0"
        max="200" data-highlight="true">
    </div>

Answer 1

我在你的代码中发现了一个问题.使用jQuery Mobile时,不应该使用document ready.像往常一样,它会在jQuery Mobile在DOM中准备小部件之前触发.要解决此问题,您需要使用适当的jQuery Mobile页面事件.阅读此ANSWER以查找文档就绪和页面事件之间的区别.

工作示例:http://jsfiddle.net/Gajotres/k7C26/7/

改变这个:

$(document).ready(mostrarValoresOpcionesGuardados());

对此:

$(document).on('pagebeforeshow', '#opciones', function(){ 
    mostrarValoresOpcionesGuardados()
});