title: Unable to keep the CSS theme using jQuery Mobile when swapping div content
body: <p>I think the title is self-explanatory, but here we go: I'm new to jQuery and mobile development. While using jQuery Mobile standard .css file (which explanation I actually found here: <a href="http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html" rel="nofollow">http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html</a>), I'm trying to dynamically swap a div content to another through a JS function but the css theme won't carry over. Here's a simplified version of my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
    &lt;head&gt; 
      &lt;title&gt;My Page&lt;/title&gt; 
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
        &lt;link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" /&gt;
        &lt;script src="jquery-1.8.2.min.js"&gt;&lt;/script&gt;
        &lt;script src="jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
          function callNext () {
          $('#div_auth').html($('#div_functions').html());
        }
        &lt;/script&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
  
      &lt;div data-role="page" id="div_main"&gt;
  
        &lt;div data-role="header"&gt;
          &lt;h1&gt;Phonegap Test&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div data-role="content" id="div_auth"&gt;   
          &lt;form name="fields" action=""&gt;
            Name: &lt;input type="text" id="login" name="login"/&gt;&lt;br&gt; 
            &lt;button type="button" onclick="callNext();"&gt;Send&lt;/button&gt;
          &lt;/form&gt; 
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div data-role="content" id="div_functions"&gt;
        &lt;form name="functions" action=""&gt;
          &lt;button type="button"&gt;Client List&lt;/button&gt; &lt;br&gt;
          &lt;button type="button"&gt;Price List&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So when div_auth content is loaded, it loads data-theme="a" by default (I suppose this is implied in div_main and not div_auth, but anyway). However, when I click the button, even when I specify a data-theme for div_functions, the buttons will be rendered as standard, "css-less" html buttons.</p>
  
  <p>Just a note before anyone begins to wonder, I need to call the div swap through a JS function since this is just a simplification of a Phonegap/Cordova application I'm beginning to develop and this call emulates how it actually works. However, I tested the very code above and it (mis)behaves just the same</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>In order to make some sense out of Scott's answer, I've tried a little something:</p>
  
  <pre><code>&lt;div data-role="content" id="div_auth" data-theme="b"&gt;  
    &lt;form name="fields" action=""&gt;
      Name: &lt;input type="text" id="login" name="login"/&gt;&lt;br&gt; 
      &lt;button data-theme="a" type="button" onclick="callNext();"&gt;Send&lt;/button&gt;
    &lt;/form&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>As you all can see, I explicitly added data-theme="b" to div_auth and data-theme="a" to the wrapped button. To my surprise, it actually worked, where div_auth assumes the blue theme while the button is rendered in a blackish color. However, using the same approach in the second div (div_functions), even using the very same themes resulted in buttons with no css styling attached: </p>
  
  <pre><code>&lt;button data-theme="a" type="button"&gt;Price List&lt;/button&gt;
  </code></pre>
  
  <p>still renders a "stale button".</p>