Question

我试图让一个滑块与JQuery Mobile 1.4.2一起使用。

我想要做的是使用slidestop事件在其他位置更新值。但是，slidestop事件不会触发。我创建了一个测试文件并在Safari和Firefox中进行了测试。当我停止滑动滑块时没有任何反应。有人可以告诉我我错过了什么教程吗？

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
        <script src="js/jquery.min.js">
            </script>
        <script src="js/jquery.mobile.js">
            </script>

        <title>Concertzender</title>
    </head>
    <body>
        <label for="slider-step">Input slider:</label>
        <input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="10" />
    </body>
    <script>
            $( "#slider-step" ).on('slidestop',function( event ) { alert("slidestop event fired"); });
    </script>
</html>

编辑：我尝试了下面建议的答案，但是我的设置比上面的例子稍微复杂一点，因此，它没有成功。

我试图避免JQuery Mobile的页面结构，只是将它用于滑块。问题是，当我换到另一个页面时，页面创建或页面显示不存在，所以我不能等待那些事件。我想要的是创建一个新的滑块（或者用另一个已经存在的div替换一个空div，然后更改以前空div的输入id的id。所以我剩下的是一个唯一的新ID＆＃ 39; ed输入（带有相应的标签）。

我将如何使用幻灯片与新滑块进行交互？我试过这个：

$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});

但是这给了我Safari中的两个滑块，其中一个滑块停止，另一个滑块不响应。但是，在iOS中，我得到一个滑动的滑块，但不会触发一个slidestop事件。省略第一行会在Safari中提供一个无响应的滑块，而在iOS中则无法触发。

所以我的问题很简单：如何在不使用JQuery Mobile的页面的情况下为新滑块启用slidestop事件？

Answer 1

您需要在pagecreate中包装所有事件/绑定。

$(document).on("pagecreate", function () {
  $("#slider-step").on('slidestop', function (event) {
    console.log("slidestop event fired");
  });
});

<强> Demo

JQuery Mobile滑块无法正常工作

1 个答案: