更新 jQuery Mobile 中动态添加的复选框的视觉样式

Question

我目前正在“pageinit”事件期间动态添加一堆复选框，我能够成功添加和检查。通过将以下存根的实例附加到“ul”组件来添加复选框：

<li>
<div class = "new-student">
    <img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
    <!-- Block A -->
    <div id="grid" class="ui-grid-a ui-mini">
        <div class="ui-block-a ui-mini">
            <div class="ui-bar ui-bar-a ui-mini">
                <h2 class="name-student">Name</h2>
                <p class="attendingtime-student">00:00</p>
            </div>
        </div>
        <!-- Block B -->
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-a ui-mini">
                <h2 class="pickuptype-student">null</h2>
                <p class="pickuptime-student">00:00</p>
            </div>
        </div>
    </div>
    <form>
        <!-- Attending -->
        <fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
            <input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
            <label for="checkbox-h-2a">1</label>
            <input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
            <label for="checkbox-h-2b">2</label>
            <input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
            <label for="checkbox-h-2c">3</label>
        </fieldset>
    </form>
</div>

但是；我无法更新复选框的视觉样式，这导致所有复选框看起来像这样：

我尝试调用“.checkboxradio.('refresh')”，但它只会导致错误（说我无法在尚未初始化的组件上调用该方法）。

请帮忙！

Answer 1

关于这个：

我试过调用“.checkboxradio.('refresh')”，但它只会导致 一个错误（说我不能在一个组件上调用那个方法 被初始化）。

通常当出现这种错误时你需要这样做：

$('#someId').checkboxradio.().checkboxradio.('refresh');

第一个调用将初始化 checkboxradio 小部件，第二个调用将增强其标记。 但这不是复选框小部件的情况，要增强动态添加的复选框，您需要这样做：

$('[type="checkbox"]').checkboxradio();  

没有刷新参数。

这是一个工作示例：http://jsfiddle.net/Gajotres/VAG6F/77/

当然还有其他解决方案，如果您使用的是 jQuery Mobile 至 1.4 的旧版本，请阅读 this 文章（目前不推荐使用上述功能）。

如果您正在使用 jQuery Mobile 1.4 并且计划使用未来版本，请使用以下方法：

$('.ui-content').enhanceWithin();

了解更多信息here。

还有第三个选项，而不是 pageinit 使用 pagecreate 事件。与 pageinit 一样，它只会触发一次，但与 pageinit 不同，它会在 jQuery Mobile 增强活动页面之前触发。所以此时附加的所有内容都会自动增强。