title: How to attach events to dynamically loaded subpages in jQueryMobile?
body: <p>I've the following code that uses jQueryMobile Sliders:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  
          &lt;link rel="stylesheet" href="jquery.mobile.css" /&gt;
  
          &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.mobile.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
               $(document).ready(function() {
                  var row = $(
                       '&lt;div data-role="fieldcontain"&gt;' +                  
                               '&lt;label for="slider"&gt;&lt;/label&gt;' +
                               '&lt;input type="range" name="slider" id="slider" value="0" min="0" max="99"/&gt;' +
                       '&lt;/div&gt;');
                  $('#lights_content').append(row);
                  $(row).find('#slider').bind('change', function(){ console.log($(this).val()); });
               });
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt; 
          &lt;div data-role="page" id="home" data-theme="b"&gt;
                  &lt;div data-role="content"&gt;
                          &lt;a href="#lights" data-transition="slide"&gt;Lights&lt;/a&gt;
                  &lt;/div&gt; 
          &lt;/div&gt;
          &lt;div data-role="page" id="lights" data-theme="b" data-add-back-btn="true"&gt;
                  &lt;div data-role="header" data-theme="b"&gt;&lt;h4&gt;Light&lt;/h4&gt;&lt;/div&gt; 
                  &lt;div data-role="content" id="lights_content"&gt;&lt;/div&gt; 
          &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>The <em>change</em> 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</p>
  
  <pre><code>console.log($('#slider').data('events').change);
  </code></pre>
  
  <p>in JS console just after attachement of the event and after the rendering of the page. The question is:</p>
  
  <p><strong>How to attach persistent event handler or instruct jQueryMobile to attach it in future</strong></p>
  
  <p>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).</p>
  
  <p><strong>UPD</strong>: Here is a link to <a href="http://jsfiddle.net/t7AFe/" rel="nofollow">JavaScript kitchen</a>, where you can see how it is not working.</p>