我在 JQuery Mobile 中有一个页面，其中包含一个表单。该表单同时具有静态元素(在 html 中定义)和动态元素(在运行时通过脚本创建)。我第一次访问我的页面时，它使用 JQuery 移动格式正确呈现。如果我返回，然后再次打开表单，动态元素 的所有格式都会丢失。我必须重新加载页面以使我的元素再次看起来正确。
我怀疑 DOM 不知何故被弄乱了。我在包含动态内容的父元素上调用 empty()，因此 DOM 中不应有重复元素。
已在 Chrome (windows) 和 Andriod 2.3 浏览器上重现此内容。
下面是我正在做的事情的简化版本。在实际应用中，元素来自数据库，因此大多数表单 View 可能包含不同的元素。因此，每次都需要重新创建它们。
要查看行为，
- 单击“显示表单”链接，
- 点击后退按钮，
- 然后再次单击“显示表单”链接。您会注意到格式消失了。
任何想法将不胜感激
fiddle : 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>
最佳答案
不确定发生了什么问题。但我确实觉得删除和添加新的 dom 元素并不是真正必要的。您也可以将所有内容放在 document.ready 包装器中以防止错误。
#elementContainer 清空时出现问题。解决方法是动态创建它，然后删除它。
编辑:现在它应该在没有隐藏/显示的情况下工作
fiddle : 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();
});
});
关于javascript - JQuery 移动表单在第一次查看后丢失格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6246837/