title: Styles not getting applied properly in dynamically created radio buttons
body: <p>I have to create a radio button group dynamically.I am able to successfully create it.But the problem is that the dynamically created radio buttons do not look like the static ones.</p>
  
  <p>I tried two approaches:
  1) Called <code>create</code> on the <code>fieldset</code> - <code>ui-corner-all</code> class is getting added on an inner span and as a result all radio buttons appear rounded.
  2) Called <code>create</code> on the div that encloses <code>fieldset</code> - Here the problem is better.But still some problems exist.At first,when there is only radio button, <code>ui-controlgroup-last</code> class is getting added to that radiobutton.Next,when the second radio button is added,the <code>ui-controlgroup-last</code> class is getting added to that radiobutton.But the <code>ui-controlgroup-last</code> is still present in the first radio button and this cycle repeats.As a result all radio buttons have the styles of last radiobutton.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  $(document).ready(function()
  {
      for (var i = 0; i &lt; 3; i++)
      {
          $("#rgroup1").append('&lt;input type="radio" name="rg1" id="radio1-'+i+'"/&gt;&lt;label for="radio1-'+i+'"&gt;Value&lt;/label&gt;');
          $("#rgroup1").trigger("create");
  
          $("#rgroup2").append('&lt;input type="radio" name="rg2" id="radio2-'+i+'"/&gt;&lt;label for="radio2-'+i+'"&gt;Value&lt;/label&gt;');
          $("#radiodiv1").trigger("create");
  
      }
  });
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div data-role="content"&gt;
      &lt;h3&gt;Normal radio buttons&lt;/h3&gt;
      &lt;div id="radiodiv"&gt;
          &lt;fieldset data-role="controlgroup" id="rgroup"&gt;
              &lt;input type="radio" name="rg" id="radio-1"/&gt;&lt;label for="radio-1"&gt;Value&lt;/label&gt;
              &lt;input type="radio" name="rg" id="radio-2"/&gt;&lt;label for="radio-2"&gt;Value&lt;/label&gt;
              &lt;input type="radio" name="rg" id="radio-3"/&gt;&lt;label for="radio-3"&gt;Value&lt;/label&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;h3&gt;Dynamically created-Div Refresh&lt;/h3&gt;
      &lt;div id="radiodiv"&gt;
          &lt;fieldset data-role="controlgroup" id="rgroup1"&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
       &lt;h3&gt;Dynamically created-Fieldset Refresh&lt;/h3&gt;
      &lt;div id="radiodiv1"&gt;
          &lt;fieldset data-role="controlgroup" id="rgroup2"&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>P.S - The reason why I am calling create after each append is because thats how it works in my actual usecase-Only one radio button is created at any time.</p>
  
  <p>The generated source </p>
  
  <pre><code>&lt;html lang="en" class="ui-mobile"&gt;&lt;head&gt;&lt;base href="http://localhost:8081/html5/calendar-new/radio_issue.html"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  $(document).ready(function()
  {
      for (var i = 0; i &lt; 3; i++)
      {
          $("#rgroup1").append('&lt;input type="radio" name="rg1" id="radio1-'+i+'"/&gt;&lt;label for="radio1-'+i+'"&gt;Value&lt;/label&gt;');
          $("#rgroup1").trigger("create");
  
          $("#rgroup2").append('&lt;input type="radio" name="rg2" id="radio2-'+i+'"/&gt;&lt;label for="radio2-'+i+'"&gt;Value&lt;/label&gt;');
          $("#radiodiv1").trigger("create");
  
      }
  });
  
      &lt;/script&gt;
  &lt;title&gt;&lt;/title&gt;&lt;/head&gt;
  
  &lt;body class="ui-mobile-viewport"&gt;&lt;div data-role="page" data-url="/html5/calendar-new/radio_issue.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 933px; "&gt;
    &lt;div data-role="content" class="ui-content" role="main"&gt;
      &lt;h3&gt;Normal radio buttons&lt;/h3&gt;
      &lt;div id="radiodiv"&gt;
          &lt;fieldset data-role="controlgroup" id="rgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"&gt;
              &lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg" id="radio-1"&gt;&lt;label for="radio-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-corner-top"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;
              &lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg" id="radio-2"&gt;&lt;label for="radio-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;
              &lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg" id="radio-3"&gt;&lt;label for="radio-3" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;h3&gt;Dynamically created-Div Refresh&lt;/h3&gt;
      &lt;div id="radiodiv"&gt;
          &lt;fieldset data-role="controlgroup" id="rgroup1" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"&gt;
          &lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg1" id="radio1-0"&gt;&lt;label for="radio1-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-btn-corner-all"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg1" id="radio1-1"&gt;&lt;label for="radio1-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-btn-corner-all"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg1" id="radio1-2"&gt;&lt;label for="radio1-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-btn-corner-all"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/fieldset&gt;
      &lt;/div&gt;
       &lt;h3&gt;Dynamically created-Fieldset Refresh&lt;/h3&gt;
      &lt;div id="radiodiv1"&gt;
          &lt;fieldset data-role="controlgroup" id="rgroup2" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"&gt;
          &lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg2" id="radio2-0"&gt;&lt;label for="radio2-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg2" id="radio2-1"&gt;&lt;label for="radio2-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class="ui-radio"&gt;&lt;input type="radio" name="rg2" id="radio2-2"&gt;&lt;label for="radio2-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"&gt;&lt;span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"&gt;&lt;span class="ui-btn-text"&gt;Value&lt;/span&gt;&lt;span class="ui-icon ui-icon-radio-off ui-icon-shadow"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/fieldset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;&lt;div class="ui-loader ui-body-a ui-corner-all" style="top: 290px; "&gt;&lt;span class="ui-icon ui-icon-loading spin"&gt;&lt;/span&gt;&lt;h1&gt;loading&lt;/h1&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>