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

Question

我目前正在“pageinit”事件期间动态添加一堆复选框，我可以成功添加和检查这些复选框。通过将以下 stub 的实例附加到“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

关于这一点:

I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).

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

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

第一个调用将初始化 checkboxradio 小部件，第二个调用将增强其标记。 但这不是复选框小部件的情况，要增强动态添加的复选框，您需要执行以下操作:

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

没有刷新参数。

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

当然还有其他解决方案，请阅读this如果您使用的是 jQuery Mobile 1.4 之前的旧版本(提到的功能目前已弃用)，请参阅文章。

如果您使用的是 jQuery Mobile 1.4 并且计划使用 future 版本，请使用此方法:

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

了解更多信息 here 。

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