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

【问题标题】：how to detect when a jquery mobile Input slider is moved on jquery?如何检测 jquery 移动输入滑块何时在 jquery 上移动？
【发布时间】：2016-02-24 23:26:10
【问题描述】：

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

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

直播代码：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>

【问题讨论】：

@freedomn-m 我想坚持手机版
您可能想阅读以下内容：mcve。您提供的大部分代码都与滑块无关。
好的 - 你试过收听change 事件吗？还是slidestop？
我尝试了更改，但它实际上并没有（奇怪地）监听输入的任何更改
你能用 jquerymobile 创建一个 jsfiddle（或等效的）吗？我试过了，但是一旦 jquerymobile 加载，滑块就不再是滑块，而没有 jquerymobile（浏览器滑块）是一个不错的滑块

标签： javascript jquery jquery-mobile

【解决方案1】：

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

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

DEMO

【讨论】：

非常感谢您提供如此简洁的答案

【解决方案2】：

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

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

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

【讨论】：