JQuery Mobile slider not working

问题

I'm trying to get a slider to work in with JQuery Mobile 1.4.2.

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>

EDIT: 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.

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");});

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.

So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?

回答1:

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

来源：https://stackoverflow.com/questions/22443749/jquery-mobile-slider-not-working

标签

jquery-mobile

jquery-ui-slider