Enhancements not applied to slider inputs

Enhancements not applied to slider inputs

Hi guys,

I'm dynamically generating a set of slider controls. These render as expected the first time they are built, in a $(document).ready() handler. However when I call the same build function as a result of the user clicking on a button, they are rendered without any jquery mobile enhancements. I've tried calling the .page() function on the containing page, calling the .input() function on the input and various other things to no avail.

Any ideas? Code below...

Thanks - Martin

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Sliders</title> 
  5. <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
  6. <script type="text/javascript" src="jquery-1.5.min.js"></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.  $('#update').click(function(){
  10. createSliders()
  11. return false
  12. })
  13. createSliders()
  14. })
  16. function createSliders(){
  17. var sliderContainer = $('#sliderContainer')
  18. sliderContainer.children().remove()
  19. for (var i = 0; i < 3; i++) {
  20. var candidateName = 'Candidate ' + i
  21. var container = $('<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"></div>')
  22. container.append($('<label for="slider">' + candidateName + ' </label>'))
  23. var slider = $('<input type="range" name="slider" id="slider" value="0" min="-5" max="5"></input>')
  24. container.append(slider)
  25. sliderContainer.append(container)
  26. }
  27. $('#mypage').page()
  28. }
  29. </script>
  30. <script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>
  31. </head> 
  32. <body> 
  33. <div data-role="page" id="mypage">

  35. <div data-role="header">
  36. <h1>Sliders</h1>
  37. </div>
  38. <div data-role="content">
  39. <a href="index.html" data-role="button" id='update'>Update</a>
  40. <div id='sliderContainer'/>
  41. </div>
  42. </div>
  43. </body>
  44. </html>