JQuery Mobile 滑块不起作用答案

【问题标题】：JQuery Mobile slider not workingJQuery Mobile 滑块不起作用
【发布时间】：2014-04-22 00:45:28
【问题描述】：

我正在尝试让滑块与 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 的页面结构，只将它用于滑块。问题是，当我切换到另一个页面时，pagecreate 或 pageshow 不存在，所以我不能等待这些事件。我想要的是创建一个新的滑块（或者更确切地说用另一个已经存在的 div 替换一个空 div，然后更改以前空 div 的输入 id 的 id。所以我剩下的是一个唯一的新 ID 输入（使用对应的标签）。

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

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

但这给了我 Safari 中的两个滑块，其中一个用于滑动停止，另一个没有响应。然而，在 iOS 中，我得到一个滑动的滑块，但不会触发 slidestop 事件。省略第一行会使我在 Safari 中出现无响应的滑块，而在 iOS 中不会触发。

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

【问题讨论】：

标签： jquery-mobile jquery-ui-slider

【解决方案1】：

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

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

Demo

【讨论】：