刷新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。