jQuery Mobile：如何获取范围滑块的更改事件？

我想要做的就像代码：当值大于10，显示> 10，或显示1 - 10。它工作正常。但是，如果我取消注释jquery手机，它不再工作。jQuery Mobile：如何获取范围滑块的更改事件？

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<!--<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>--> 

</head> 
<body> 
<form> 
<label for='range'>as</label> 
<input id='range' type='range' onmousemove='test()'> 
<p id='display'>display</p> 
</form> 
<script> 
function test(){ 
    var v = $('#range').val(); 
    if(v <= 10)$("#display").text('1-10'); 
    else $("#display").text('>10'); 
} 
</script> 
</body> 
</html>

来源

2017-06-13 user7873949

在你看到控制台的任何具体的错误？ –

试过了，适合我吗？究竟是什么问题？ –

如果您取消注释行＃7 <脚本src =“https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”>，则它不再起作用 – user7873949

有三种JQM滑块控件的事件初始化后：

slidestart
变化
slidestop

为了获得正确的行为，您应该提供正确的JQM页面结构并在pagecreate事件中注册事件处理程序。下面是一个简单的存根，你可以测试一个JQM滑块：

$(document).on("pagecreate", "#page-one", function() { 
 
    $("#slider").on("slidestart", function() { 
 
    var val = $(this).val(); 
 
    $("#txt1").val(val); 
 
    }); 
 
    $("#slider").on("change", function() { 
 
    var val = $(this).val(); 
 
    $("#txt2").val(val); 
 
    }); 
 
    $("#slider").on("slidestop", function() { 
 
    var val = $(this).val(); 
 
    $("#txt3").val(val); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div id="page-one" data-role="page"> 
 
    <div role="main" class="ui-content"> 
 
     <label for="slider">Slider</label> 
 
     <input type="range" name="slider" id="slider" min="1" max="100" value="1" step="1" autocomplete="off" /> 
 
     <fieldset class="ui-grid-b"> 
 
      <div class="ui-block-a"> 
 
      <label for="txt1">slidestart:</label> 
 
      <input data-mini="true" name="txt1" id="txt1" value="" type="text"> 
 
      </div> 
 
      <div class="ui-block-b"> 
 
      <label for="txt2">slidechange:</label> 
 
      <input data-mini="true" name="txt2" id="txt2" value="" type="text"> 
 
      </div> 
 
      <div class="ui-block-c"> 
 
      <label for="txt3">slidestop:</label> 
 
      <input data-mini="true" name="txt3" id="txt3" value="" type="text"> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-06-13 10:47:11 deblocker

我建议你到div内包装input，重视change事件到特定div，通过它可以得到的slider值。下面的工作代码段。

$("#slider").change(function() { 
 
    $("#display").text($('#range').val()<=10?'1-10':'>10'); 
 
});

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<form> 
 
    <div id="slider"> 
 
    <label for='range'>as</label> 
 

 
    <input id='range' type='range' min="0" max="100" value="0"> 
 
    </div> 
 
    <p id='display'>display</p> 
 
</form>

来源

2017-06-13 08:13:54

非常感谢！这是一个很好的解决方案。但我仍然想知道为什么它包括jquery手机后不工作的原因。 jquery mobile是否改变了jquery的默认事件？ – user7873949

'jquery mobile'可能有其自己的版本元素附加为它的用户界面和其他的东西正常工作..它隐藏默认的'输入'元素和呈现其新的控制''divs'和'跨度'等，实际上，所有插件会做同样的..所以，默认的东西可能无法正常工作，我们需要选择他们的方式.. :) –

@GuruprasadRao：如果问题没有包括JQM – deblocker

jQuery Mobile：如何获取范围滑块的更改事件？

回答

相关问题