表单复选框第二次显示不正确

Question

我有一个带有复选框的简单表单的奇怪问题。

第一次显示它看起来很好。但是在导航回上一页并再次访问它之后 - ui 没有更新，导致没有 jQuery mobile 的普通复选框风格..

我疯狂地用谷歌搜索，发现了一些提示，比如 .fieldcontain();但它不起作用 =(

数据是通过淘汰绑定检索的..

有什么好的想法吗？

这是代码...

<div id="searchCitiesPage" data-role="page" data-theme="a" class="page searchCities"> 
<header data-role="header" data-theme="b">
</header>
<div data-role="content" class="content" data-theme="a">  
    <script id="countyListTemplate" type="x-jquery-tmpl">
        <form id="fieldform" action="form.php" method="post">
            <fieldset id="fieldsetgroup" data-role="controlgroup">

                {{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
                    <input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
                    <label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
                {{/each}}
            </fieldset>
        </form>
    </script>

    <div data-bind="template: 'countyListTemplate'"></div> 

    <div class="submit">
        <a href="#searchCriteriasPage" class="navbutton submitPostnumre">Næste</a>
    </div>
</div>

Answer 1

我也遇到了这样的问题，但就我而言，在加载页面之前会动态重绘复选框。我尝试刷新：

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

但它给了我一个错误，指出 checkboxradio 尚未初始化。但是，当我尝试这样做时：

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

它使复选框每次都正确显示。我仍然在黑暗中摸索 JQuery Mobile，无法确切地说出在哪里发生了什么以及为什么发生（我想我正在初始化复选框？），但我想我会在下次像我这样的人用谷歌搜索他们的方式时分享到这个线程。

Answer 2

您可以添加一些 JavaScript 来在每次页面加载时重新初始化复选框的 jQuery Mobile 标记。像这样的事情：

<script type="text/javascript">
    $(function() {
        $('[data-role=page]').live('pageshow',function(){ 
            $('#fieldform').find('input').checkboxradio();
        });
    });
</script>

Answer 3

我怀疑

{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
    <input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
    <label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}

当您转换回页面时会再次调用此代码。我建议在页面显示之前（第一次加载时）提取信息/标签/等，并静态显示它。因此，当转换回来时，它会显示相同的数据。

你们中的一些人可以使用其中一个现场活动并在页面显示之前重新设计它的样式，例如：

$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
    $("input[type='checkbox']").checkboxradio("refresh");
    // or
    $(".zipcodecheckbox").checkboxradio("refresh");
});