javascript - 动态设置复选框标签文本会导致复选框出现样式问题

在我的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");

最佳答案

如果在页面加载后检查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