第二次显示表单复选框未正确显示答案

【问题标题】：Form checkboxes not being displayed correctly second time shown第二次显示表单复选框未正确显示
【发布时间】：2011-08-17 00:19:46
【问题描述】：

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

第一次显示它看起来不错..但是在导航回上一页并再次访问它之后 - 用户界面没有更新，导致没有 jQuery 移动样式的普通复选框..

我疯狂地用 Google 搜索，发现了一些提示，例如 .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>

【问题讨论】：

标签： jquery-mobile jquery-templates knockout.js

【解决方案1】：

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

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

【讨论】：

这绝对是一种改进——但现在行是分开的。在原来的情况下，它们是一个带有行的大部分……修复后每一行都有自己的部分……有意义吗？跨度>
嗯，除了 JQM 为您提供的开箱即用的标准内容之外，我没有真正自定义表单布局的经验。抱歉......不过，他们的表格看起来确实不错，所以也许你会想考虑只使用他们给你的东西？

【解决方案2】：

我会怀疑这段代码

{{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");
});

【讨论】：

【解决方案3】：

我也遇到过这样的问题，但在我的情况下，复选框在加载页面之前被动态重绘。我试过刷新：

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

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

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

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

【讨论】：

遇到了完全相同的问题——删除“刷新”也对我有用。