Question

我也尝试.('refresh')和.page()无济于事。

文本框会更新但不会更新滑块位置，因此只要您触摸它，该值就会下降。您可以在此处看到此行为：http://www.webeshoppin.info/st0.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tax</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <link href="css/tax.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>  
</head>
<body>
<div id="page2" data-role="page"  data-add-back-btn="true">
    <div data-role="header">
        <h4> The Proposed</h4>
        <a href="#decisions" data-icon="arrow-r" data-role="button" id="joinls">next</a>
    </div><!-- /header -->
    <div data-role="content">
        <h5>Ducks are Fum</h5>
        <div>       
            <input type="range" min="0"  max="150" id="inp1" value="34"/>
        </div>
        <div>
            <a id="but1" href="#" data-role="button" data-mini="true" >but1</a>  
        </div>
        <div id="txthere"></div>
    </div>
</div>      
</body>
</html> 

<script>
var data =87;
$('#page2').live('pageinit', function(event) {    

    $("#inp1").val(data).trigger('create');
    $("#but1").click( function (e) {    
        data +=1;
        console.log(data);
        $("#txthere").append(data+'<br/>');
    });    
    $("#inp1").change( function(e){
        data = Number($(this).val());
        console.log(data);
        $("#txthere").append(data+'<br/>');
    });     
});
</script>

Answer 1

您应该使用.slider('refresh')刷新小部件而不是.trigger('create') 这意味着初始化一个未初始化的小部件。

刷新更新滑块

如果您通过JavaScript操作滑块，则必须调用刷新   更新视觉样式的方法。

$（ '选择器。 '）滑块（' 刷新'）;

来源：http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/slider/methods.html

以下是演示：http://jsfiddle.net/s63pt/

Jquery移动触发器创建不更新滑块按钮位置

1 个答案: