为什么在Jquery Mobile中刷新页面时页面会变空？

我正在使用Jquery Mobile。我从JSON文件中获取结果，并将其显示在页面上。内容通过单击事件显示。但当我刷新页面时，页面变为空。问题是什么

---

谢谢

我想我明白了：所以你是在动态加载页面上的元素，但当你刷新时，一切都会恢复。。。。。从目前为止你所采用的方法来看，这是意料之中的

使用jquerymobile，您不必使用click动态插入元素集，而是尝试在整个文档上绑定“pagebeforechange”，然后处理URL

$(document).bind( "pagebeforechange", function( e, data ) {....})

下面是一个您尝试执行的示例note Jquery Mobile 1.0..（完整的源代码粘贴在下面）：

还可以考虑使用Jquery Mobile的更新版本。。。。这里的一些东西可能已经被弃用了

说明：

因此基本上，“pagebeforeshow”处理程序将在页面出现之前启动

• 编写函数来读取和处理URL请求
• 调用生成所请求页面元素的相关函数

此外，您可能希望对链接锚定“a href=“#”

但是为什么javascript要处理第一个登录页呢？除非你打算在第一页上有大量淫秽的数据

changePage JSON示例
//一些样本分类数据。这些数据在内存中
//用于演示，但可以动态加载
//通过ajax。
变量类别数据={
动物：{
名称：“动物”，
描述：“从土豚到斑马，你最喜欢的动物。”，
项目：[
{
名称：“宠物”，
},
{
名称：“农场动物”，
},
{
名称：“野生动物”，
}
]
},
颜色：{
名称：“颜色”，
描述：“来自神奇彩虹的新鲜色彩。”，
项目：[
{
名称：“蓝色”，
},
{
名称：“绿色”，
},
{
名称：“橙色”，
},
{
名称：“紫色”，
},
{
名称：“红色”，
},
{
名称：“黄色”，
},
{
名字：“紫罗兰”，
}
]
},
车辆：{
名称：“车辆”，
描述：“从汽车到飞机，应有尽有。”，
项目：[
{
名称：“汽车”，
},
{
名称：“飞机”，
},
{
名称：“施工”，
}
]
}
};
//加载特定类别的数据，基于
//传入的URL。为中的项目生成标记
//类别，将其插入到嵌入的页面中，然后
//该页是当前活动页。
函数showCategory（urlObj，选项）
{
var categoryName=urlObj.hash.replace（/.*category=/，“”），
//获取表示所选类别的对象
//注意，在这一点上，我们可以
//而是发出一个ajax请求来获取数据，但是
//就本示例而言，它已在内存中。
类别=类别数据[类别名称]，
//我们用来显示内容的页面已经存在
//DOM。我们将要编写的页面的id
//在“？”之前的哈希中指定了到的内容。
pageSelector=urlObj.hash.replace（/\？*$/，“”）；
如果（类别）{
//获取我们要将内容转储到的页面。
变量$page=$（页面选择器），
//获取页面的标题。
$header=$page.children（“：jqmData（role=header）”），
//获取页面的内容区域元素。
$content=$page.children（“：jqmData（role=content）”），
//我们将要注入内容的标记
//页面的区域。
markup=“”+category.description+”
，
//此类别的项目数组。
cItems=类别.items，
//类别中的项目数。
numItems=cItems.length；
//为类别中的每个项目生成列表项目
//并将其添加到我们的标记中。
对于（变量i=0；i”+cItems[i]。名称+””；
}
标记+=“
”；
//在标题中找到h1元素并注入
//这是一个很好的分类。
$header.find（“h1”）.html（category.name）；
//将类别项目标记插入到内容元素中。
$content.html（标记）；
//页面被惰性地增强。我们在页面上调用page（）
//元素，以确保在我们
//尝试增强我们刚刚注入的listview标记。
//对page（）的后续调用将被忽略，因为页面/小部件
//只能增强一次。
$page.page（）；
//增强我们刚刚注入的listview。
$content.find（“：jqmData（role=listview）”）.listview（）；
//我们不需要刚修改的页面的数据url
//要成为显示在浏览器位置字段中的url，
//因此，将dataUrl选项设置为类别的URL
//我们刚上船。
options.dataUrl=urlObj.href；
//现在调用changePage（）并告诉它切换到
//我们刚刚修改的页面。
$.mobile.changePage（$page，选项）；
}
}
//侦听是否有调用changePage（）的尝试。
$（文档）.bind（“pagebeforechange”，函数（e，数据）{
//我们只想处理调用方所在位置的changePage（）调用
//要求我们通过URL加载页面。
if（typeof data.toPage==“string”）{
//我们被要求通过URL加载页面，但我们仅
//要处理请求特定数据的URL吗
//类别。
var u=$.mobile.path.parseUrl（data.toPage），
re=/^#类别项目/；
如果（u.hash.search（re）！=-1）{
//我们被要求显示特定类别的项目。
//调用为类别构建内容的内部方法
//基于我们的内存中类别数据结构的动态。
showCategory（u、data.options）；
//确保告诉changePage（）我们已经处理了这个调用，所以它不会
//我必须做任何事。
e、 预防默认值（）；
}
}
});
类别
在下面选择一个类别：

您能提供您的代码吗