title: jQuery mobile radio buttons
body: <p>I am developing a web application with jQuery 1.9.1 and jQuery Mobile 1.3.2.</p>
  
  <p>I have some problems with horizontal radio buttons. They display an icon: <code>data-icon="radio-on"</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/a3ax9.jpg" alt="Radio buttons with data icon radio on"></p>
  
  <p>The radio buttons are added dynamically to the DOM.</p>
  
  <p>My HTML :</p>
  
  <pre><code>&lt;div id="id_card"&gt;
      &lt;div id="custom_properties"&gt;&lt;h2&gt;DATA NOT INCLUDED IN ID CARD&lt;/h2&gt;&lt;/div&gt;
      &lt;div id="default_properties"&gt;&lt;h2&gt;ID CARD DATA&lt;/h2&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>var idCards = [....]; // Array of objects
  
  // This variable contains the HTML corresponding to the custom ID CARDS.
  var customIdCardHtml = '&lt;ul data-role="listview" id="custom_idcard_list" data-inset="true"&gt;';
  // This variable contains the HTML corresponding to the known ID CARDS.
  var existingIdCardHtml = '&lt;ul data-role="listview" id="idcard_list" data-inset="true"&gt;';
  
  // This variable contains the concatenation of both 'customIdCardHtml' and 'existingIdCardHtml'.
  var idCardHtml = '';
  
  // Treat each ID CARD in the array
  for(var i=0; i&lt;idCards.length; i++) {
      // Get the current ID CARD
      var idCard = idCards[i];
  
      // Make sure it is not null, otherwise do nothing with it
      // and pass to the next one.
      if(idCard) {
          // Create an ID card line made of a label and a radio button
          var html = '&lt;li class="idcard_property" data-role="fieldcontain"&gt;';
  
          html += '&lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;';
          html += '&lt;legend&gt;'+idCard.NAME+'&lt;/legend&gt;';
  
          // Populate the radio button with values
          for(var j=0; j&lt;idCard.VALUES.length; j++) {
              // Get the current value of the selected ID CARD
              var value = idCard.VALUES[j];
              if(idCard.VALUE == value) {
                  html += '&lt;input type="radio" class="select_idcard_property" name="'+idCard.TAG+'" id="'+idCard.TAG+'_'+value+'" value='+value+' checked="checked"&gt;';
                  html += '&lt;label for="'+idCard.TAG+'_'+value+'" data-icon="radio-off"&gt;'+value+'&lt;/label&gt;';
              } else {
                  html += '&lt;input type="radio" class="select_idcard_property" name="'+idCard.TAG+'" id="'+idCard.TAG+'_'+value+'" value='+value+'&gt;';
                  html += '&lt;label for="'+idCard.TAG+'_'+value+'"&gt;'+value+'&lt;/label&gt;';
              }
          }
          html += '&lt;/fieldset&gt;';
          html += '&lt;/li&gt;';
  
          // Depending on the type of ID Card (custom or existing)
          // append the html to a list or another
          if(idCard.CUSTOM)
          {
              customIdCardHtml += html;
          } else {
              existingIdCardHtml += html;
          }
      }
  }
  
  customIdCardHtml+='&lt;/ul&gt;';
  existingIdCardHtml+='&lt;/ul&gt;';
  
  $('#custom_properties').append(customIdCardHtml);
  $('#default_properties').append(existingIdCardHtml);
  
  $('#id_card').trigger('create');
  </code></pre>
  
  <p>Here is the code jQM generates:</p>
  
  <pre><code>&lt;div class="ui-radio" style="display: block;"&gt;
    &lt;input type="radio" name="TEST" id="TEST_NO" value="NO" style="display: block;"&gt;
    &lt;label for="TEST_NO" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-on" data-theme="a" data-mini="false" class="ui-last-child ui-radio-on ui-btn-active ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-a" style="display: block;"&gt;
      &lt;span class="ui-btn-inner" style="display: block;"&gt;
        &lt;span class="ui-btn-text" style="display: inline;"&gt;NO&lt;/span&gt;
        &lt;span class="ui-icon ui-icon-radio-on ui-icon-shadow" style="display: inline;"&gt;&amp;nbsp;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>How to tell jQM not to display the <code>span</code> with <code>class="ui-icon..."</code>?</strong></p>
  
  <p>For the record, the icon is not shown at initialization. It is only displayed when the radio button is clicked, the user goes to another tab and returns to the tab with radio buttons.</p>
  
  <p>Thanks</p>