Question

我在JQuery mobile中有一个页面，其中包含一个表单。表单包含静态元素（在html中定义）和动态元素（在运行时通过脚本创建）。我第一次访问我的页面，它使用JQuery移动格式正确呈现。如果我返回，然后再次打开表单，动态元素的所有格式都将丢失。我必须重新加载页面才能使我的元素再次正确。

我怀疑DOM是以某种方式搞砸了。我在包含dymanic内容的父元素上调用empty（），因此DOM中不应该有重复的元素。

在Chrome（Windows）和Andriod 2.3浏览器上都重现了这一点。

以下是我正在做的简化版本。在实际应用程序中，元素来自数据库，因此大多数表单视图可能包含不同的元素。因此，每次都需要重新创建它们。

要查看行为，

点击“显示表单”链接，
点击后退按钮，
然后再次点击“显示表单”链接。您会注意到格式化已经消失。

非常感谢任何想法

小提琴： http://jsfiddle.net/tj4yF/1/

代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta content=" initial-scale=1.0; maximum-scale=1.0;user-scalable=0;" />
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
             <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
                <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
                <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

                <script>
                    var g_aElementList = [];
                        g_aElementList.push( "<label for='ta'>General comment</label><textarea name='ta' id='ta' rows='3'></textarea>" );
                        g_aElementList.push( "<label for='num'>My Number</label><input type='number' name='num' id='num'/>");
                        g_aElementList.push( "<label for='chk'>My Checkbox</label><input type='checkbox' name='chk' id='chk' value='true'/>");

                    $("#pnlPage2").live("pagebeforeshow", function(event, ui) {

                        var jContainer = $("#elementContainer");

                        for( var cI=0; cI<g_aElementList.length; cI++ ) {
                            jContainer.append( "<li data-role='fieldcontain'>" + g_aElementList[cI] + "</li>" );    
                        }

                        jContainer.page();


                    });

                    $("#pnlPage2").live("pagehide", function(event, ui) {
                        $("#elementContainer").empty();
                    });

                </script>
        </head>
        <body>
            <div data-role="page" id="pnlPage1">
                <div data-role="header"> 
                  <h1>Page1</h1> 
                </div>
                <div data-role="content">
                    <a id="pnlTest" class="panel" href="#pnlPage2">Show form</a>
                </div>
                <div data-role="footer"> 
               </div>
            </div>
             <div data-role="page" id="pnlPage2">
                <div data-role="header"> 
                  <h1>Page2</h1> 
                </div>
                <div data-role="content">
                    <form id="frmTest">
                        <ul data-role="listview" data-inset="true" data-theme="c">
                            <div id="elementContainer"></div>
                        </ul>   
                    </form>
                </div>
                <div data-role="footer"> 
               </div>
            </div> 

        </body>
    </html>

Answer 1

不确定出了什么问题。但我确实认为，删除和添加新的dom元素可能并不是真正有用的。您也可以将所有内容放在document.ready包装器中以防止错误。

不知何故#elementContainer被清空有问题。解决方法是动态创建它，然后删除它。

编辑：现在它应该没有隐藏/显示

<强>小提琴： http://jsfiddle.net/kkyWg/1/

<强>代码：

$(document).ready(function () {
    var g_aElementList = [];
    g_aElementList.push( "<label for='ta'>General comment</label><textarea name='ta' id='ta' rows='3'></textarea>" );
    g_aElementList.push( "<label for='num'>My Number</label><input type='number' name='num' id='num'/>");
    g_aElementList.push( "<label for='chk'>My Checkbox</label><input type='checkbox' name='chk' id='chk' value='true'/>");



    $("#pnlPage2").live("pagebeforeshow", function(event, ui) {
        $('<div id="elementContainer"></div>').appendTo("#list");

        var jContainer = $("#elementContainer");
        for( var cI=0; cI<g_aElementList.length; cI++ ) {
            jContainer.append( "<li data-role='fieldcontain'>" + g_aElementList[cI] + "</li>" );
        }
        jContainer.page();

    });

    $("#pnlPage2").live("pagehide", function(event, ui) {
        $("#elementContainer").remove();
    });
});

JQuery移动表单在第一次查看后丢失格式

1 个答案: