jQuery 移动单选按钮

Question

我正在使用 jQuery 1.9.1 和 jQuery Mobile 1.3.2 开发一个 Web 应用程序。

我在使用水平单选按钮时遇到了一些问题。它们显示一个图标：data-icon="radio-on"。

单选按钮被动态添加到 DOM。

我的 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>

我的 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');

这是 jQM 生成的代码：

<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>

如何告诉 jQM 不显示 span 和 class="ui-icon..."？

为了记录，初始化时未显示该图标。它仅在单击单选按钮时显示，用户转到另一个选项卡并返回到带有单选按钮的选项卡。

谢谢

Answer 1

我终于用了奥马尔的解决方案$('span.ui-icon').remove();。

但是看起来不太对劲。这只是一种解决方法。