Question

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

有人可能会提供解释原因，并在可能的情况下提供解决方案吗？

分别是我的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

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

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

<强> DEMO

Answer 2

这是因为事件授权。尝试使用类似的东西

forms.py

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

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

2 个答案: