Change event not fired on slider

Change event not fired on slider

Hi,
I'm new to jQueryMobile framework, while I was running some tests to better understand all the framework I've step into this piece of code (that I have written), that doesn't work and I can't understand why...
basically there are 2 pages, in each page there is a form with a slider that should react to the "change" event writing its value to a textbox. This works in the first page, but not in the second page although the code is the same...

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Page Title</title>
  6. <meta name="viewport" content="width=800, initial-scale=1">
  7. <link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" />
  8. <script src="jquery-2.1.0/jquery-2.1.0.min.js"></script>
  9. <script src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>
  11. <script>
  12. $(document).ready(function() {
  14. $("#slider-1").change(function() { 
  15. var sliderValue = $(this).val();
  16. $("#text-1").val(sliderValue);
  17. });
  19. $("#slider-2").change(function() { 
  20. var sliderValue = $(this).val();
  21. $("#text-2").val(sliderValue);
  22. });
  23. });
  24. </script>
  25. </head>
  26. <body>

  28. <!-- /page1 -->
  29. <div data-role="page" id="page_1">
  30. <!-- /header -->
  31. <div data-role="header">
  32. <h1>Page 1</h1>
  33. </div>

  35. <!-- /content -->
  36. <div role="main" class="ui-content">
  37. <form id="form-1">
  38.    <label for="slider-2">Slider-1:</label>
  39.    <input type="range" name="slider-1" id="slider-1" data-highlight="true" min="0" max="100" value="50">
  40. <label for="text-1">Slider-1 value:</label>
  41. <input type="text" name="text-1" id="text-1" value="50">
  42. </form>
  43. <a href="#page_2" class="ui-btn">Page 2</a>
  44. </div>
  45. </div>

  47. <!-- /page2 -->
  48. <div data-role="page" id="page_2">

  50. <!-- /header -->
  51. <div data-role="header">
  52. <h1>Page 2</h1>
  53. </div>

  55. <!-- /content -->
  56. <div role="main" class="ui-content">
  57. <form id="form-2">
  58.    <label for="slider-2">Slider-2:</label>
  59.    <input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50">
  60. <label for="text-2">Slider-2 value:</label>
  61. <input type="text" name="text-2" id="text-2" value="50">
  62. </form>
  63. <a href="#page_1" class="ui-btn">Page 1</a>
  64. </div>
  66. </div>
  67. </body>
  68. </html>

I can't understand why in the first page the change event is fired and not in the second page...

Samuele.