关于 jQuery 手机 <input type="range">

About the jQuery mobile <input type="range">

我用 jqm 创建了一个输入标签,像这样

<input type="range" min="1" max="40" value="1" step="0.1" autocomplete="off"/>

我写了javascript代码

$('.ui-slider-handle').click(function(){
    var pix = parseFloat($(this).attr("title"));
    console.log(pix);
});

电脑上没问题,手机上不行,所以我改了代码 像这样

$('.ui-slider-handle').on("tap",function(){ var pix = parseFloat($(this).attr("title")); console.log(pix); });

还是不行!

谢谢!

试试这个:

HTML:

<div data-role="page" id="page-1">
  <div data-role="header">
      <h4>Slider</h4>
  </div>
  <div data-role="main" class="ui-content">
      <label for="slider">Slider</label>
      <input type="range" name="slider" id="slider" min="1" max="40" value="1" step="0.1" autocomplete="off" />
      slidestart: <input type="text" id="txt1">
      slidechange: <input type="text" id="txt2">
      slidestop: <input type="text" id="txt3">
  </div>
</div>

JavaScript:

$(document).on("pagecreate", "#page-1", 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);
  });
});

Fiddle: https://fiddle.jshell.net/8js4npso/