重置动态更改jQuery-mobile-Slider时出现奇怪错误

Question

我目前正在开发一个我正在使用jQuery-Mobile的webapp。我从服务器中获取update-ui-function（轨道的时间和长度）中的数据并使用它们来显示音乐轨道中的当前位置（时间是滑块的值，长度是最大值）。这很好。

如果用户跳转到上一首曲目，会很奇怪。您可以预期，由于update-ui-function每秒运行一次，滑块将完全重置。然而事实并非如此。它会稍微跳回去，但不会跳到最后，并且之后不会更新。 因为一张图片胜过一百个字：

滑块如果工作正常

用户跳转到上一曲目后的滑块

再次：我的问题是滑块没有重置并且它停止移动，即使update-ui-function确实正确地更新了两个时间显示。

以下是滑块的更新方式：

//Get the current position (time)
$(this).find("time").each(function(){
    time = $(this).text();
});

//And the total length (time)
$(this).find("length").each(function(){
    length = $(this).text();
});

//Set slider and ps
$("#positionSlider").attr("max", length);
$("#positionSlider").attr("value", Number(time)).slider("refresh");

//The time-displays which are updatet correctly
$("#currentTime").text(format_time(time));
$("#totalTime").text(format_time(length));

我尝试在更新之前重置max-和value-attribute，但这只会导致滑块完全停止工作。删除滑块并将其重新添加到我的DOM中，搞砸了我的CSS。

感谢任何帮助或想法。

编辑：HTML-Markup

<div id="position">
    <input id="positionSlider" class="ui-hidden-accessible" type="range" name="slider-mini" id="slider-mini" value="0" min="0" max="100" data-highlight="true" data-mini="true" />
    <p id="currentTime">00:00:00</p><p id="totalTime">00:00:00</p>
</div>

Answer 1

使用.prop()代替.attr()：

  

属性与属性

     

属性和属性之间的区别非常重要   具体情况。在jQuery 1.6之前，有时会使用.attr（）方法   在检索某些属性时考虑了属性值，   这可能会导致行为不一致。从jQuery 1.6开始，.prop（）   方法提供了一种显式检索属性值的方法   .attr（）检索属性。例如，selectedIndex，tagName，   nodeName，nodeType，ownerDocument，defaultChecked和defaultSelected   应该使用.prop（）方法检索和设置。在jQuery之前   1.6，这些属性可以使用.attr（）方法检索，但这不在attr的范围内。这些没有相应的   属性，只是属性。

来源：http://api.jquery.com/prop/

Answer 2

而不是.attr('value', value)使用.val()，然后调用refresh方法。

  

<强> Demo

$("#positionSlider").val(value).slider("refresh");