Javascript JQuery移动表单在第一次查看后丢失格式
我在JQuery mobile中有一个页面，其中包含一个表单。表单既有静态元素（在html中定义）也有动态元素（在运行时通过脚本创建）。第一次进入我的页面时，它使用JQuery mobile格式正确呈现。如果我返回，然后再次打开表单，动态元素的所有格式都将丢失。我必须重新加载页面以使我的元素看起来再次正确 我的怀疑是DOM不知怎么搞砸了。我对保存动态内容的父元素调用empty（），因此DOM中不应该有重复的元素 在Chrome（windows）和Andriod 2.3浏览器上都复制了这一点 下面是我正在做的一个简化版本。在实际应用程序中，元素来自数据库，因此大多数表单视图可能包含不同的元素。因此，每次都需要重新创建它们 要看到这种行为Javascript JQuery移动表单在第一次查看后丢失格式,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我在JQuery mobile中有一个页面，其中包含一个表单。表单既有静态元素（在html中定义）也有动态元素（在运行时通过脚本创建）。第一次进入我的页面时，它使用JQuery mobile格式正确呈现。如果我返回，然后再次打开表单，动态元素的所有格式都将丢失。我必须重新加载页面以使我的元素看起来再次正确 我的怀疑是DOM不知怎么搞砸了。我对保存动态内容的父元素调用empty（），因此DOM中不应该有重复的元素 在Chrome（windows）和Andriod 2.3浏览器上都复制了这一点 下面
<!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>
$(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();
});
});
var g_aElementList=[]；
g_aElementList.push（“一般性评论”）；
g_aElementList.push（“我的号码”）；
g_aElementList.push（“我的复选框”）；
$（“pnlPage2”）.live（“pagebeforeshow”，函数（事件，用户界面）{
var jContainer=$（“#elementContainer”）；
for（var cI=0；cI不确定出了什么问题。但我确实觉得删除和添加新的dom元素并不是很简单。此外，您可以将所有内容都放在document.ready包装中以防止错误
清空#elementContainer可能会出现问题。解决方法是动态创建它，然后将其删除
编辑：现在它应该可以在没有隐藏/显示的情况下工作了
小提琴：
代码：
<!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>
$(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();
});
});
$（文档）.ready（函数（）{
var g_aElementList=[]；
g_aElementList.push（“一般性评论”）；
g_aElementList.push（“我的号码”）；
g_aElementList.push（“我的复选框”）；
$（“pnlPage2”）.live（“pagebeforeshow”，函数（事件，用户界面）{
$（''）。附于（“#列表”）；
var jContainer=$（“#elementContainer”）；
对于（var cI=0；cIThanks。在实际应用程序中，元素来自数据库，因此大多数表单视图可能包含不同的元素。因此，每次都需要重新创建它们。关于doc.ready，我已经在应用程序中这样做了，只是尝试用最基本的示例来演示我的问题。感谢您指出它。Great。这就解决了问题。尽管我想知道原因。唯一的区别是，我们现在不是删除容器的内容，而是删除并重新创建容器本身。我认为，不管是什么，都与page（）方法有关。