在飞行中的单选按钮上刷新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>

这会导致显示以下列表:

基州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');
});

看到这个jQuery论坛帖子.