HTML

<form id="rangeSliderForm"> <span class="minValueRange"> 0 </span> **************** <span class="maxValueRange"></span>

    <div id="range-slider" data-role="rangeslider">
        <input name="range-1a" id="range-1a" min="0" max="100" value="40" type="range">
        <input name="range-1b" id="range-1b" min="0" max="100" value="80" type="range">
    </div>
</form>

然后我正在更改值并动态设置最大值和最小值。第一次它工作正常。但第二次，当我更改页面并返回时，拖动处理程序无法正常工作

$("div#range-slider").rangeslider();
$("#range-1a").val(0);
$("#range1b").val(10000);
$("#range-1a").attr("max", parseInt(10000);
$("#range-1b").attr("max", 10000);
$("div#range-slider").rangeslider('refresh');

请分享您的想法...

Answer 1

您不应该在每个pagechange上重新初始化窗口小部件。所以删除该行：

$("div#range-slider").rangeslider();

jQM已经初始化了小部件，您只需在设置值后进行刷新调用。

使用rangeslider处理页面上的pagebeforeshow事件：

$(document).on("pagebeforeshow", "#page1", function () {    
    $("#range-1a").val(10);
    $("#range-1b").val(10000);
    $("#range-1a").prop("max", 10000);
    $("#range-1b").prop("max", 10000);
    $("#range-slider").rangeslider('refresh');    
});

正在使用 DEMO

rangeSlider无效，在更改页面的Jquery mobile中

HTML

1 个答案: