在动态更改幻灯片值后,我很难刷新jQuery Mobile范围滑块。滑块两侧框中的值会更改,但幻灯片位置不会更改,鼠标悬停文本也不会更改。
$( 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>
js小提琴在这里: http://jsfiddle.net/uca97444/
请注意,我已经在StackOverflow上看到了几个相关问题,但无法找到基于这些问题的解决方案。我已经审查过的是:
Jquery移动双量程滑块重新加载与新范围
如何在jquerymobile中刷新范围滑块
pagecontainerbeforeshow"的更新为时已晚,尽管元素进行了部分更改。
将其更改为"页面创建"事件有效:
$( 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/