JQuery Mobile：在动态页面生成中使用'data-rel =“back”'

Question

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

基本上，我有三页：

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

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

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

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

有关为什么会这样的解释？ 谢谢您的帮助。

Answer 1

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

工作演示

$('.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
 });
});

Answer 2

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

问题：

1. 无法将任何页面更改保存到未指向真实.html页面的历史记录。 所以动态页面之间的反弹就出来了。
2. 我需要一种方法将我的数据传递到将保留在历史记录中的.html页面，所以我使用了URL中的序列化字符串，就像一个GET字符串。 与此类似，但是一个不同的，更短的，更清洁的一个我找不到链接 - 抱歉！ （ 如何在JavaScript中获取查询字符串值？ ）
3. .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);
}