Jquery Mobile，價值變化後滑塊不會刷新

Question

我有一個小問題，我正在與localstorage和im加載一個值，想法是滑塊更改與該值。我得到了正確的負載部分，它加載我想要的數字（我可以顯示它在一個警報，所以我知道是好的），但是當試圖把滑塊與該數字，它只是留在達菲爾值（我嘗試停用它，問題是一樣的）。

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")); 但它不工作或者方法頁面時readyHere是代碼運行。這是從滑塊的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之前初始化它，如下所示：

$("#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. 您可以自定義傘下的一個頁面的所有標記。例如，您可以將opciones頁面內的點擊事件，<button/> s，<input/>的驗證綁定到頁面容器。通過這種方式，所有的控件都可以簡化和管理。
2. Since pageinit event fires before DOM ready並只加載DOM的一部分，其使用DOM的速度更快ready。
3. DOM ready將初始化頁面中的所有元素，如果您想使用ajax注入方法的jQM，這不是您想要的。使用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/