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

Question

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

有人可以解释为什么会这样吗？如果可能的话，可以提供一个解决方案吗？

我的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>

Answer 1

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

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

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

Answer 2

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

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

DEMO

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

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

javascript

jquery

jquery-mobile