javascript - 动态设置checkbox标签文本导致checkbox样式问题

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