jQuery移动单选按钮

Question

I am developing a web application with jQuery 1.9.1 and jQuery Mobile 1.3.2.

I have some problems with horizontal radio buttons. They display an icon: data-icon="radio-on" .

The radio buttons are added dynamically to the DOM.

My HTML :

<div id="id_card">
    <div id="custom_properties"><h2>DATA NOT INCLUDED IN ID CARD</h2></div>
    <div id="default_properties"><h2>ID CARD DATA</h2></div>
</div>

My Javascript:

var idCards = [....]; // Array of objects

// This variable contains the HTML corresponding to the custom ID CARDS.
var customIdCardHtml = '<ul data-role="listview" id="custom_idcard_list" data-inset="true">';
// This variable contains the HTML corresponding to the known ID CARDS.
var existingIdCardHtml = '<ul data-role="listview" id="idcard_list" data-inset="true">';

// This variable contains the concatenation of both 'customIdCardHtml' and 'existingIdCardHtml'.
var idCardHtml = '';

// Treat each ID CARD in the array
for(var i=0; i<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 = '<li class="idcard_property" data-role="fieldcontain">';

        html += '<fieldset data-role="controlgroup" data-type="horizontal">';
        html += '<legend>'+idCard.NAME+'</legend>';

        // Populate the radio button with values
        for(var j=0; j<idCard.VALUES.length; j++) {
            // Get the current value of the selected ID CARD
            var value = idCard.VALUES[j];
            if(idCard.VALUE == value) {
                html += '<input type="radio" class="select_idcard_property" name="'+idCard.TAG+'" id="'+idCard.TAG+'_'+value+'" value='+value+' checked="checked">';
                html += '<label for="'+idCard.TAG+'_'+value+'" data-icon="radio-off">'+value+'</label>';
            } else {
                html += '<input type="radio" class="select_idcard_property" name="'+idCard.TAG+'" id="'+idCard.TAG+'_'+value+'" value='+value+'>';
                html += '<label for="'+idCard.TAG+'_'+value+'">'+value+'</label>';
            }
        }
        html += '</fieldset>';
        html += '</li>';

        // 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+='</ul>';
existingIdCardHtml+='</ul>';

$('#custom_properties').append(customIdCardHtml);
$('#default_properties').append(existingIdCardHtml);

$('#id_card').trigger('create');

Here is the code jQM generates:

<div class="ui-radio" style="display: block;">
  <input type="radio" name="TEST" id="TEST_NO" value="NO" style="display: block;">
  <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;">
    <span class="ui-btn-inner" style="display: block;">
      <span class="ui-btn-text" style="display: inline;">NO</span>
      <span class="ui-icon ui-icon-radio-on ui-icon-shadow" style="display: inline;">&nbsp;</span>
    </span>
  </label>
</div>

How to tell jQM not to display the span with class="ui-icon..." ?

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.

Thanks

Answer 1

I finally used omar's solution $('span.ui-icon').remove(); .

But it doesn't look right. This is just a work around.