刷新jQuery mobile rangeslider

Question

我在幻燈片值的動態更改後刷新jQuery Mobile rangeslider時遇到困難。滑塊每邊的框中的值會更改，但滑動位置不會更改，並且鼠標懸停的文本不會更改。

$(document).on("pagecontainerbeforeshow", function (event, ui) { 
 
    console.log("THIS EVENT WAS ACTUALLY CALLED"); 
 
    document.getElementById("hoursofdaymin").value = 6; 
 
    document.getElementById("hoursofdaymax").value = 16; 
 
    $("#hoursofdayslider", ui.prevPage).rangeslider('refresh'); 
 
    
 
    // I've also tried: 
 
    //$("#hoursofdaymin", ui.prevPage).slider('refresh'); 
 
    //$("#hoursofdaymax", ui.prevPage).slider('refresh'); 
 

 
});

<div class="upage ui-page-theme-a" id="mainpage" data-role="page"> 
 
    <div class="upage-outer"> 
 
     <div data-role="header" class="container-group inner-element uib_w_2" data-uib="jquery_mobile/header" data-ver="0"> 
 
      <h1>Heading1</h1> 
 
      <div class="widget-container wrapping-col single-centered"></div> 
 
      <div class="widget-container content-area horiz-area wrapping-col left"></div> 
 
      <div class="widget-container content-area horiz-area wrapping-col right"></div> 
 
     </div> 
 
     <div data-role="content"> 
 
      <a class="widget uib_w_1 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" href="#settings" data-transition="fade">Settings</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="upage vertical-col left" id="settings" data-role="page"> 
 
    <div data-role="header" data-add-back-btn="true" data-direction="reverse" data-back-btn-text="Back" data-uib="jquery_mobile/header"> 
 
     <h1>Settings</h1> 
 

 
    </div> 
 
    <div data-role="content"> 
 
     <form> 
 
      <div data-role="rangeslider" id="hoursofdayslider"> 
 
       <label for="hoursofdaymin">Hours:</label> 
 
       <input type="range" id="hoursofdaymin" min="0" max="24" value="8"> 
 
       <label for="hoursofdaymax">Hours:</label> 
 
       <input type="range" id="hoursofdaymax" min="0" max="24" value="20"> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div>

的jsfiddle這裏：http://jsfiddle.net/uca97444/

請注意，我已經看到了幾個StackOverflow上相關的問題，但一直沒能找到基於這些解決方案。那些我已經審查是：

Jquery mobile dual range slider reload with new range

How to refresh rangeslider in jquerymobile

Answer 1

似乎與「pagecontainerbeforeshow」更新爲時已晚，儘管局部變化的元素。

它更改爲 「pagecreate」 事件工作：

$(document).on("pagecreate", "#settings", function() { 
    $("#hoursofdaymin").val(6); 
    $("#hoursofdaymax").val(16); 
    $("#hoursofdayslider").rangeslider('refresh'); 
}); 

http://jsfiddle.net/uca97444/1/

$(document).on("pagecreate", function (event, ui) { 
    $("#hoursofdaymin").val(6); 
    $("#hoursofdaymax").val(16); 
    $("#hoursofdayslider").rangeslider('refresh'); 
}); 

http://jsfiddle.net/uca97444/2/