css - 单选按钮没有动态应用样式

Question

每次用户访问选项卡菜单时，我都会尝试刷新单选按钮列表。第一次访问样式还可以，但它们的行为类似于复选框，并且在单击其他单选按钮时不能取消选中。

我试图把refresh();方法，但它仍然不起作用。

你可以在JSFIDDLE上看到演示

有什么建议吗？谢谢。

$('.export_tab').click(function(){
    $("#radios_wrapper").children().remove(); //Remove all previous radio buttons
    for(var i in localStorage) //Looping through the localStorage
        {
            dataIndex = JSON.parse(localStorage[i]).index;
            dataName = JSON.parse(localStorage[i]).name;
                    //Then insert a new one
            $("#radios_wrapper").append('<input type="radio" value="'+dataIndex+'" name="'+dataIndex+'" id="radio'+dataIndex+'"/><label for="radio'+dataIndex+'">'+dataName+'</label>');
        }
});

这是HTML

<div data-role="fieldcontain">
     <fieldset data-role="controlgroup" id='radios_wrapper'>

     </fieldset>
</div>

Answer 1

单选按钮需要相同的名称才能成为一个组。所以：

'<input type="radio" value="'+dataIndex+'" name="'+dataIndex+'"/>'

不是正确的方法。您要分组的所有无线电的名称应该相同。它应该是：

'<input type="radio" value="'+dataIndex+'" name="allTheSame"/>'

这是您的Fiddle的更新。

要告诉 jQuery 重绘，请使用触发器函数，例如.append('whatever').trigger('create'). http://jquerymobiledictionary.pl/faq.html。更新了小提琴。