动态设置复选框标签文本导致复选框中的样式问题

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