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

Answer 2

您的代码现在一定会抛出错误：

在初始化之前不能调用“刷新”

要解决这个问题（和您的问题），您需要在 refresh 之前初始化 slider，如下所示：

 $("#pesoUsuario").val(peso).slider().slider("refresh");

编辑：

在你的代码中你正在这样做：

$(document).ready(mostrarValoresOpcionesGuardados()); //2 times

() 不能在那里。原因是因为在 jQuery 中，您将函数作为回调传递，而不是调用它。你必须做两件事：

1. 将ready 事件更改为：

   $(document).ready(mostrarValoresOpcionesGuardados);
   

2. 删除最后一行中的ready 事件。

这是一个演示：http://jsfiddle.net/k7C26/8/

虽然这适用于您的情况（因为您的小提琴中没有多个页面），但您必须尝试构建代码以通过 pageinit 事件运行。 这样，

1. 您可以自定义伞下一页的所有标记。例如，您可以将点击事件、<button/>s、<input/>s 在opciones 页面内的验证绑定到页面容器。这样一来，所有的控制都将得到简化和管理。
2. Since pageinit event fires before DOM ready 并且只加载 DOM 的一部分，比使用 DOM ready 更快。
3. DOM ready 将初始化页面中的所有元素，如果你想使用 jQM 的ajax 注入方法，这不是你想要的。使用pageinit 只会加载正确的页面，并会通过ajax 加载其他页面。

您可以通过以下方式重新构建它：

$(document).on("pageinit", "#opciones", function () {
    //bind click event to page, delegate from there
    $(this).on('click', "#botonGuardarOpciones", guardarDatosOpciones);
    //call function which loads data from localStorage
    mostrarValoresOpcionesGuardados();
});

这是一个演示：http://jsfiddle.net/hungerpain/k7C26/9/