Home/ Questions/Q 6977743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:39:53+00:00

I’ve the following code that uses jQueryMobile Sliders: <!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta

  • 0

I’ve the following code that uses jQueryMobile Sliders:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="jquery.mobile.css" />

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.mobile.js"></script>
        <script type="text/javascript">
             $(document).ready(function() {
                var row = $(
                     '<div data-role="fieldcontain">' +                  
                             '<label for="slider"></label>' +
                             '<input type="range" name="slider" id="slider" value="0" min="0" max="99"/>' +
                     '</div>');
                $('#lights_content').append(row);
                $(row).find('#slider').bind('change', function(){ console.log($(this).val()); });
             });
        </script>
</head>
<body> 
        <div data-role="page" id="home" data-theme="b">
                <div data-role="content">
                        <a href="#lights" data-transition="slide">Lights</a>
                </div> 
        </div>
        <div data-role="page" id="lights" data-theme="b" data-add-back-btn="true">
                <div data-role="header" data-theme="b"><h4>Light</h4></div> 
                <div data-role="content" id="lights_content"></div> 
        </div> 
</body>
</html>

The change event do not fire while slider is moving. I’ve found that the problem is because jQueryMobile renders the page on first navigation to my subpage Lights and destroys the event itself. This can be proven using

console.log($('#slider').data('events').change);

in JS console just after attachement of the event and after the rendering of the page. The question is:

How to attach persistent event handler or instruct jQueryMobile to attach it in future

I don’t want to add the event after page rendering. I want to dynamically create the element ant attach the event immediately (or attach a callback that will attach the event after rendering).

UPD: Here is a link to JavaScript kitchen, where you can see how it is not working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work (I just tested it on jsfiddle). Change:

    $(row).find('#slider').bind('change', function(){$('#vv').val($(this).val()); });

    to:

    $('div').delegate('#slider','change', function(){$('#vv').text($(this).val()); });

    And if you wanted to make sure that it changes just the next span you could do something like this:

    $('div').delegate('#slider','change', function(){
   $(this).closest('#lights_content').next('span').text($(this).val()); 
});
    • 0