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

Question

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

我也曾尝试.('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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jas*_*per 5

您应该使用.slider('refresh')刷新小部件而不是.trigger('create') 用于初始化未初始化的小部件.

刷新更新滑块

如果您通过JavaScript操作滑块,则必须在其上调用refresh方法以更新视觉样式.

$( '选择 ')滑块(' 刷新').

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

这是一个演示:http://jsfiddle.net/s63pt/

归档时间：	13 年，9 月前
查看次数：	1275 次
最近记录：	13 年，9 月前