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

Question

我目前在＆＃34; pageinit＆＃34;期间动态添加了一堆复选框。事件，我能够成功添加和检查。通过将以下存根的实例附加到＆＃34; ul＆＃34; -component来添加复选框：

<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>

然而;我无法更新复选框的视觉样式，这会导致所有复选框看起来像这样：

我尝试过调用＆＃34; .checkboxradio。（＆＃39; refresh＆＃39;）＆＃34;但它只会导致错误（说我无法在尚未初始化的组件上调用该方法）。

请帮忙！

Answer 1

关于这个：

  

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

通常当发生此类错误时，您需要执行此操作：

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

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

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

没有刷新参数。

这是一个有效的例子：http://jsfiddle.net/Gajotres/VAG6F/77/

当然还有其他解决方案，请阅读this文章，如果您使用的旧版本的jQuery Mobile最高为1.4（目前已弃用上述功能）。

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

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

详细了解 here 。

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