如何检测 jquery 移动输入滑块何时在 jquery 上移动

how to detect when a jquery mobile Input slider is moved on jquery?

本文关键字：移动 jquery 何时 输入 何检测 检测      更新时间：2023-09-26

我一直在尝试检测jQuery移动输入滑块何时移动，以便我可以获取其值，问题是滑块的句柄在我应用脚本或正在发生的任何事情后呈现，所以我无法检测到其中的更改。

有人可以解释为什么这是，如果可能的话，一个解决方案？

实时代码：http://liveweave.com/hrrHzP

我的JS和HTML分别： 

$(document).ready(function() {
    $('#slider-s').mousedown(function() {
        $(document).mousemove(function() {
            $("#title").css({
                "background-color": "#" + $("#slider-s").attr("value")
            });
        });
    });
});

<!DOCTYPE html>
<html>
<head>
    <title>MobilePage</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="https://view.jquerymobile.com/1.4.5/theme-classic/theme-classic.css" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head>
<body>
    <div data-role="page" data-theme="c">
        <div role="main" class="ui-content">
          <h1 id="title">Title</h1>
          <label for="slider-s">Input slider:</label>
          <input type="range" name="slider-s" id="slider-s" min="111111" max="999999" data-highlight="true">          
        </div>
    </div>
</body>
</html>

您可以使用滑块和事件委托的更改事件：

$(document).on("pagecreate","#page1", function(){ 
    $(document).on("change", "#slider-s", function(){
    var col = $(this).val();
    $("#title").css({
        "background-color": "#" + col
    });
  });
});

演示

这是因为事件委派。尝试这样的东西

$( "html" ).on( "click", "#slider-s", function() {
  console.log('success');
});

进一步解释。http://api.jquery.com/on/https://learn.jquery.com/events/event-delegation/

相关文章：