在飞行中的单选按钮上刷新jQueryMobile样式

Question

我正在尝试重新设置一组垂直单选按钮，并且我添加到其中一个主题的新主题会显示，但我从另一个/其他主题中移除的主题不会消失。

我的目标是更改所选单选按钮的主题（相关控件，无论如何），以便在选中时更加突出。

<div data-role="content">

    ...

    <fieldset data-role="controlgroup" id="showChooser">
        <legend><h3>Which show are you attending?</h3></legend>

        <input type="radio" name="activeShow" id="activeShow1" value="1" />
        <label for="activeShow1">
            <h2>Choice 1</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow2" value="2" />
        <label for="activeShow2">
            <h2>Choice 2</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow3" value="3" />
        <label for="activeShow3">
            <h2>Choice 3</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        ...

    </fieldset>

    ...

</div>

这导致显示以下列表：

base state http://img.skitch.com/20120319-8wfa4ep6txwdtgjy475k6b5c3k.png

因此，点击其中一个，我正在运行此代码：

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c');
    $(this).next().attr('data-theme','e');
    $("#settings").page();
});

理论上，第一行应该将它们全部重置为主题“C”的基本状态，然后第二行将突出显示所选项目。我可以逐步查看这些HTML更改，因此很明显接下来需要发生的事情是jQuery Mobile重新解析和更新显示。

请注意尽管在最后用.page()刷新整个页面的绝望尝试 - 即使这样做无法达到预期的效果。

第一次单击一个时，它具有所需的效果：

但后续点击似乎不会突出显示以前选定的所有行：

我也尝试了$("#showChooser").listview("refresh")以及其他一些我无法回忆的类似事情，但没有一个具有预期的效果。那么我错过了什么/做错了什么？

Answer 1

我遇到了同样的问题。

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
    $(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});

请参阅this jQuery forum post。