刷新 jQuery 移动范围滑块答案

【问题标题】：Refreshing jQuery mobile rangeslider刷新 jQuery 移动范围滑块
【发布时间】：2015-01-10 13:15:14
【问题描述】：

动态更改幻灯片值后，我很难刷新 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>

jsFiddle 在这里：http://jsfiddle.net/uca97444/

请注意，我已经在 StackOverflow 上看到了几个相关的问题，但无法根据这些问题找到解决方案。我已经审查过的是：

Jquery mobile dual range slider reload with new range

How to refresh rangeslider in jquerymobile

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案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/

【讨论】：