jquery-mobile jquery jquery-mobile-slider

Receiving events from slider event after page change in jQuery Mobile

In a PhoneGap app, I navigate to a html page via the $.mobile.changePage() function.

The target page contains a slider input element.

I want to compute the selected value after a change of the slider, but I cant figure out how to receive the events.

I looked up the samples of the jQM demo page, but it's not working.

Here is the code of the target page containing the slider element:

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  <meta name="format-detection" content="telephone=no" />

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

  <script type="text/javascript" src="../cordova/cordova-2.7.0-android.js"></script>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  //WRONG RECEIVING SCRIPT?
  <script type="text/javascript">
    $("#volume-slider").on("stop", function (event) {
      var value = event.target.value;
      alert("User has finished sliding my slider, final value: " + value);
    });
  </script>

</head>
<body>
  <div id="homeContainer" data-role="page">
  <div data-role="content">
        <label for="slider-fill">Lautstärke:</label>
        <input id="volume-slider" type="range" name="slider-fill" value="50" min="0" max="100" data-highlight="true" />
  </div>
  </div>
</body>
</html>

Could it be that I have to place the receiving script somwhere else? Because it seems not to be executed.

Thank you, Max

Solution

You have several errors in your code:

Working example: http://jsfiddle.net/Gajotres/JCdGA/

$(document).on('pageinit', '#homeContainer', function(){ 
    $(document).on( "slidestop",  "#volume-slider" ,function( event, ui ) {
        alert('Slide Stop!');
    });       
});

If you want to bind an event you must do it during the correct page event, in this case pageinit is used.
slidestop is a correct event to detect end of slider movement.
If you are using multiple HTML page format and if this page is not an initial HTML this javascript will be discarded. When jQuery Mobile loads new HTML pages it loads only BODY content and discards the rest. Read more here.