JQuery Mobile：使用 'data-rel="back"' 生成动态页面

关键词：

【中文标题】JQuery Mobile：使用 \'data-rel="back"\' 生成动态页面【英文标题】：JQuery Mobile: Using 'data-rel="back"' with dynamic page generationJQuery Mobile：使用 'data-rel="back"' 生成动态页面 【发布时间】：2013-03-26 22:15:06 【问题描述】：

在我的 jquery 移动应用程序中向后移动历史堆栈时遇到问题。

基本上，我有三个页面：

搜索表单（带有页面角色的预构建 div。有限导航：仅限结果列表页面） 结果列表（带有页面角色的预建 div，通过 ajax 添加结果信息。可以导航到任何记录页面） 记录页面（完全动态构建。可无限导航到相关记录页面）

记录页面是根据表格和记录ID动态创建的，每次选择新记录时都会附加到文档正文中。

var page_id = table + record_id;
var pg_html = newPageHTML(page_id );
$('body').append(pg_html);
$.mobile.changePage($("#" + page_id));

在前进到一条记录并按下“返回”按钮 (data-rel="back") 后，预期的行为将是返回到上一页，无论是另一条记录还是结果列表，但我被发送一路回到搜索表单。当我使用 data-dom-cache="true" 而我不使用时会发生这种情况。

任何解释为什么会这样？感谢您的帮助。

【问题讨论】：

【参考方案1】：

在 DOM 中获取上一页的 ID，然后移动到它。

Working Demo

$('.selector').on('click', function() 

 // get the ID of the previous page
 var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;

 // move to previous page with reverse effect
 $.mobile.changePage(previous, 
  transition: 'slide',
  reverse: true
 );
);

【讨论】：

啊，谢谢奥马尔。我在过去一个小时左右一直在研究它，并在下面提出了一个复杂的解决方案。我非常感谢你的回答。我希望我可以测试和实现它，但是我对我的代码做了很多更改，我什至无法恢复到原来的问题。感谢您的示例和帮助。它看起来是一个很棒、简单、易于实施的解决方案。【参考方案2】：

好的，这就是我修复它的方法。虽然我不会选择这个作为答案，因为它与我希望它的工作方式相去甚远，而且看起来非常复杂。

问题：

无法将任何未指向真实 .html 页面的页面更改保存到历史记录。因此，在动态页面之间弹跳已经过时了。 我需要一种方法将我的数据传递到 .html 页面，该页面将保留在历史记录中，因此我使用了 url 中的序列化字符串，例如 GET 字符串。和这里类似，但是一个不同的，更短的，更干净的我找不到链接 - 抱歉！ (How can I get query string values in JavaScript?) .html 页面必须不同并在彼此之间交换，以便页面重新加载并触发页面更改事件侦听器。

现在 html 页面已存储，并具有在单击返回时重绘自身所需的所有信息。

#2 的代码（不是我的，非常感谢编写它的人）：

$.urlParam = function(name)
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;

#3 的代码：

// change page
if($('.ui-page-active').attr('id') == "record-a")
    $.mobile.changePage("p-record-b.html?table=" + content_type + "&id=" + record_id);
else if($('.ui-page-active').attr('id') == "record-b")
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
else
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);

【讨论】：

检查这个answer 在页面之间传递参数。

在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）

】在Phonegap项目中使用普通JQuery（使用JQueryMobile）【英文标题】：UsingnormalJQueryinPhonegapProject(withJQueryMobile)【发布时间】：2013-05-0915:02:43【问题描述】：我正在构建一个使用Cordova/PhoneGap和JQueryMobile的应用程序。我想在应用程序中... 查看详情

我可以使用 $.mobile.loadPage() 一次加载我所有的 jQuery Mobile 页面吗？

】我可以使用$.mobile.loadPage()一次加载我所有的jQueryMobile页面吗？【英文标题】：CanIloadallmyjQueryMobilepagesatonceusing$.mobile.loadPage()?【发布时间】：2012-12-2905:06:07【问题描述】：我想一次将每个页面加载到DOM中。我可以这样做吗？我... 查看详情

一起使用 JQuery-Mobile/Phonegap 的正确方法？

】一起使用JQuery-Mobile/Phonegap的正确方法？【英文标题】：CorrectwayofusingJQuery-Mobile/Phonegaptogether?【发布时间】：2012-06-0808:45:48【问题描述】：结合使用JQueryMobile和Phonegap的正确方法是什么（迄今为止）？两个框架都需要加载才能使... 查看详情

使用 jQuery Mobile 时如何操作 DOM？

】使用jQueryMobile时如何操作DOM？【英文标题】：HowdoImanipulatetheDOMwhenIusingjQueryMobile?【发布时间】：2011-12-0507:47:00【问题描述】：我是否使用jQueryway？或者jQueryMobile也提供了操作DOM的函数？【问题讨论】：【参考方案1】：jQueryMobil... 查看详情

使用 jQuery Mobile 编程网站的风险？

】使用jQueryMobile编程网站的风险？【英文标题】：RisksofprogrammingsiteswithjQueryMobile?【发布时间】：2011-03-3004:42:03【问题描述】：jQuery团队最近推出了http://jquerymobile.com/，旨在为移动设备创建用户界面库。我们的目标是提供构建工... 查看详情

使用 jQuery Mobile 进行 Knockout 模板绑定

】使用jQueryMobile进行Knockout模板绑定【英文标题】：KnockoutTemplateBindingwithjQueryMobile【发布时间】：2015-01-1923:05:04【问题描述】：我正在尝试在Knockout模板中使用jQueryListView控件，但绑定失败并且无法按预期工作。这是代码：<divda... 查看详情

我应该使用 jquery 还是 jquery mobile 或 iPad 网页？

】我应该使用jquery还是jquerymobile或iPad网页？【英文标题】：ShouldIusejqueryorjquerymobileoriPadwebpages?【发布时间】：2011-09-0614:36:42【问题描述】：我正在为iPad或ios设备制作网页“应用程序”。我应该使用jquerymobile还是只使用常规jquery... 查看详情

使用 jQuery Mobile 进行 XML 解析

】使用jQueryMobile进行XML解析【英文标题】：XMLParsingwithjQueryMobile【发布时间】：2013-04-0607:43:26【问题描述】：我正在尝试使用jQuerymobile解析XML文件。这是我的jQuery脚本：<script>$(document).ready(function()$.ajax(type:"GET",url:"bars.xml",data... 查看详情

使用jquery mobile创建动态下拉列表

】使用jquerymobile创建动态下拉列表【英文标题】：dynamicdropdowncreationusingjquerymobile【发布时间】：2013-11-0702:37:26【问题描述】：当我使用jquerymobile创建下拉列表时，以下代码不起作用$(function()$(\'#hello\').append(\'<selectid="myselect"data... 查看详情

AngularJS + jQuery Mobile

】AngularJS+jQueryMobile【英文标题】：【发布时间】：2013-12-1222:09:24【问题描述】：除了CSS之外，还有其他可能以移动友好的方式设置AngularJS应用程序的样式吗？我正在计划一个移动应用程序，并希望使用AngularJS进行逻辑和数据绑... 查看详情

有人知道 jquery mobile 和 jquery 的哪些版本可以一起使用吗？

】有人知道jquerymobile和jquery的哪些版本可以一起使用吗？【英文标题】：Doessomeoneknowwhatversionsofjquerymobileandjqueryworktogether?【发布时间】：2011-11-1317:20:45【问题描述】：有人知道哪些版本的jquery和jquerymobile可以一起使用吗？jqueryv1.... 查看详情

Jquery Mobile 使用 AJAX 动态替换页面

】JqueryMobile使用AJAX动态替换页面【英文标题】：JqueryMobileReplacePageDynamicallyUsingAJAX【发布时间】：2016-10-1017:44:51【问题描述】：你好可以用$(result_div).html(data).enhanceWithin();为什么我有一个错误VM398:148UncaughtTypeError:$(...).html(...).enhanc... 查看详情

如何使用 jQuery-mobile 开发看起来适合 Android 的 UI？

】如何使用jQuery-mobile开发看起来适合Android的UI？【英文标题】：HowtodevelopUIwhichwilllooknativetoAndroidusingjQuery-mobile?【发布时间】：2012-07-1606:00:12【问题描述】：我正在尝试使用Phonegap和jQueryMobile构建一个Android应用程序。为了自定义U... 查看详情

如何在 jquery 3.1.0 中使用“滑动菜单 Jquery Mobile”？

】如何在jquery3.1.0中使用“滑动菜单JqueryMobile”？【英文标题】：Howtouse"SwipeMenuJqueryMobile"withjquery3.1.0?【发布时间】：2017-01-2413:01:14【问题描述】：对于我的PhoneGap项目，我尝试从以下位置实现源代码示例：https://api.jquerymo... 查看详情

Jquery Mobile：无法使用 jquery select 重新启用禁用选项（mobiscroll）

】JqueryMobile：无法使用jqueryselect重新启用禁用选项（mobiscroll）【英文标题】：JqueryMobile:Canotre-enableddisabledoptionwithinjqueryselect(mobiscroll)【发布时间】：2013-05-2409:50:28【问题描述】：我正在尝试禁用jquery选择中的所有无效选项.....禁... 查看详情

使用 jQuery-mobile 转换以不同方式加载页面

】使用jQuery-mobile转换以不同方式加载页面【英文标题】：pageloadeddifferentlywithjQuery-mobiletransition【发布时间】：2013-03-0401:54:19【问题描述】：我有一个网站在直接加载（例如通过调用其URL）时可以正常工作，但是，当我通过滑块... 查看详情

从文本框中使用 jquery mobile 填充下拉列表

】从文本框中使用jquerymobile填充下拉列表【英文标题】：PopulateDropDownListusingjquerymobilefromtextbox【发布时间】：2011-04-0118:00:22【问题描述】：我有一个id为other的文本框，我想将此文本框值填充到下拉列表中这是我用来填充的jquery..... 查看详情

jQuery 还是 jQuery Mobile？

】jQuery还是jQueryMobile？【英文标题】：jQueryorjQueryMobile?【发布时间】：2012-02-2801:00:12【问题描述】：我正在为我们的网站制作一个相当简单的移动版本。它不会有每个网站选项和我自己设计的按钮。但是对于它们的功能，弹出和... 查看详情