JQuery移动表单在第一次查看后丢失格式 [英] JQuery mobile form loses formatting after first view
问题描述
我在JQuery mobile中有一个页面，其中包含一个表单。表单包含静态元素（在html中定义）和动态元素（在运行时通过脚本创建）。我第一次访问我的页面，它使用JQuery移动格式正确呈现。如果我返回，然后再次打开表单，动态元素的所有格式都将丢失。我必须重新加载页面以使我的元素再次看起来正确。
I have a page in JQuery mobile, which contains a form. The form has both static elements (defined in the html) and dynamic elements (created through script at runtime). The first time I go to my page, it renders correctly, with the JQuery mobile formatting. If I go back, then open the form again, all formatting of dynamic elements is lost. I have to reload the page to get my elements looking correct again.
我怀疑DOM是以某种方式搞砸了。我在持有dymanic内容的父元素上调用empty（），因此DOM中不应该有重复的元素。
My suspicion is that the DOM is being messed up somehow. I'm calling empty() on the parent element holding the dymanic content, so there shouldn't be duplicate elements in the DOM.
在Chrome上重现了这一点（ Windows）和Andriod 2.3浏览器。
Have reproduced this on both Chrome (windows) and the Andriod 2.3 browser.
下面是我正在做的简化版本。在实际应用程序中，元素来自数据库，因此大多数表单视图可能包含不同的元素。因此，每次都需要重新创建它们。
Below is a simplified version of what I'm doing. In the real application, the elements come from a database, so most form views may contain different elements. Hence, they need to be re-created each time.
要查看行为，
- 点击显示表单链接，
- 点击后退按钮，
- 然后再次点击显示表单链接。您会注意到格式化已经消失。
任何想法都将不胜感激
小提琴： 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包装器中以防止错误。
Not sure what's going wrong. But I do feel that perhaps deleting and adding new dom elements is not really nescesairy. Also you may place everything in the document.ready wrapper to prevent errors.
不知何故#elementContainer被清空时出现问题。解决方法是动态创建它，然后删除它。
Somehow there's a problem with #elementContainer being emptied. A workaround is do dynamically create it and afterwards delete it.
编辑：现在它应该没有隐藏/显示
小提琴：
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移动表单在第一次查看后丢失格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
