jQuery Mobile滑块不起作用 [英] JQuery Mobile slider not working
问题描述
我正在尝试使用一个滑块与JQuery Mobile 1.4.2配合使用.
I'm trying to get a slider to work in with JQuery Mobile 1.4.2.
我想做的是使用slidestop事件在其他地方更新值.但是，slidestop事件不会触发.我创建了一个测试文件，并在Safari和Firefox中进行了测试.当我停止滑动滑块时，什么也没有发生.有人可以告诉我我错过了什么教程吗?
What I would like to do is to use the slidestop event to update a value elsewhere. However, the slidestop event does not fire. I created a test file and tested in Safari and Firefox. Nothing happens when I stop sliding the slider. Could someone please tell me what tutorial I missed?
<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>
我尝试了以下建议的答案，但是我的设置比上面的示例稍微复杂一些，因此无法解决问题.
I tried the answer suggested below, but I have a slightly more complicated setup than the example above and, therefore, it doesn't work out.
我试图避免使用JQuery Mobile的页面结构，而仅将其用于滑块.问题是，当我切换到另一个页面时，不存在pagecreate或pageshow，因此我无法等待这些事件.我想要的是创建一个新的滑块(或者将一个空的div替换为另一个已经存在的div，然后更改以前为空的div的输入id的id.所以剩下的是唯一的新ID的输入(相应的标签).
I am trying to avoid the page structure of JQuery Mobile and just use it for the slider. The thing is, when I change to another page, a pagecreate or pageshow is not present, so I cannot wait for those events. What I want is to create a new slider (or rather replace an empty div with another already existing div and then change the id of the formerly empty div's input id. So what I am left with is a unique newly ID'ed input (with corresponding label).
我将如何使用该滑动器与新的滑动器进行交互?我试过了:
How would I go about and use the slidestop to interact with the new slider? I tried this:
$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});
但是，这使我在Safari中有了两个滑块，其中一个滑块进行了滑动，另一个滑块没有响应.但是，在iOS中，我得到了一个可以滑动但不会触发slidestop事件的滑块.省略第一行，使我在Safari中的滑块无响应，而在iOS中不触发.
But that gives me two sliders in Safari, of which one does the slidestop and the other is unresponsive. In iOS, however, I get one slider that slides, but does not fire a slidestop event. Omitting the first line gives me an unresponsive slider in Safari and one that doesn't fire in iOS.
所以我的问题很简单:如何在不使用JQuery Mobile的页面的情况下为新滑块启用slidestop事件?
So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?
推荐答案
您需要将所有事件/绑定包装在pagecreate中.
You need to wrap all events/bindings in pagecreate.
$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});
Demo
这篇关于jQuery Mobile滑块不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
