删除项目后单击浏览器后退按钮的 jQuery Mobile 列表视图详细信息页面返回到已删除项目的详细信息视图答案

【问题标题】：jQuery Mobile listview detail page after deleting item clicking the browser back button goes back to the deleted item detail view删除项目后单击浏览器后退按钮的 jQuery Mobile 列表视图详细信息页面返回到已删除项目的详细信息视图
【发布时间】：2014-11-06 03:48:52
【问题描述】：

删除项目后单击浏览器后退按钮的jQuery Mobile listview 详细信息页面将返回到已删除项目的详细信息视图。

我正在使用 jQuery Mobile 框架编写一个应用程序，在一个页面中，动态创建一个列表视图供用户添加产品名称。当用户点击列表视图项目链接时，将再次动态生成详细信息视图页面以显示产品的详细信息。

在详情视图中，有一个删除按钮供用户单击以从列表中删除该项目并返回列表视图页面。

当用户单击浏览器返回按钮时，会出现问题，之前删除的列表项详细视图页面再次显示。这是不正确的，首先删除的项目不再在列表中，这让用户感到困惑。其次，如果我删除隐藏的详细信息视图页面，这会弄乱历史对象，在这种情况下我该怎么办，我该如何解决这个问题？我将为此创建一个 jsfiddle 链接。谢谢。

【问题讨论】：

jsfiddle.net/BeiHua_Xie1/h0bweavo
我加载了您的 jsFiddle，但不明白要输入什么才能看到问题的说明。您能描述一下如何使用您的 jsFiddle 来查看问题的本质吗？
在jsFiddle链接页面，请在Product name输入框输入prod1，
然后在点击添加按钮后在产品显示顺序输入框中输入1。单击 prod1 listview 链接项，在 Product detail view 页面中，请单击 Delete 按钮。它会跳转回listview页面，此时请点击浏览器左上角的返回按钮。请参阅产品详细信息视图页面再次显示。这是不正确的，因为它刚刚被删除。谢谢。

标签： jquery jquery-mobile

【解决方案1】：

如果您不希望 jQuery Mobile 更新浏览器的导航历史，您应该在导航时禁用 changeHash。因此，在点击返回按钮时，您将被重定向到历史上的上一页到当前页。

另请注意，$.mobile.changePage() 已弃用并替换为以下函数。

$.mobile.pageContainer.pagecontainer("change", newPage, {
    changeHash: false /* this won't update navigation history */
});

Demo

【讨论】：

@BeiHuaXie 不客气 :) 如果与您的问题相关，请不要忘记用 jquery-mobile 标记您的问题。