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