動態設置複選框標籤文本導致複選框中的樣式問題

Question

在我的jquery mobile(v 1.3.2)應用程序中，我剛剛創建了一個複選框並使用jquery動態設置複選框文本。當像這樣設置時，複選框樣式已摺疊。

這裏是示例代碼：

<input type="checkbox" name="OptIconsLabels" id="OptIconsLabels" class="custom" data-theme="c" /> 
<label for="OptIconsLabels"></label> 

JS：

$("#OptToolbarLbl").text("Label"); 
$('label[for="OptIconsLabels"]').text("Opt Icon"); 
$("#OptIconsLabels").attr("checked", false).checkboxradio("refresh"); 

這裏是FIDDLE DEMO

注：我試圖觸發頁面還創建

$(.page).trigger("pagecreate"); 

Answer 1

如果你呢在頁面加載後觀察DOM結構，然後label沒有照原樣使用，但是有一些<span>被添加爲兒童以顯示label文本。該跨度有class="ui-btn-text"，您需要更新。請參見下面的代碼 -

$(document).on("pageshow","#OptionsGeneral", function() { 

    $("#OptToolbarLbl").text("Label"); 
    $('label[for="OptIconsLabels"] span.ui-btn-text').text("Opt Icon"); 
    $("#OptIconsLabels").attr("checked", false).checkboxradio("refresh"); 
}); 

DEMO