Javascript JQuery mobile希望在按下后退按钮时擦除数据

在包含HTML表单元素的HTML页面（form.HTML）上，当用户点击

#search

按钮时，我希望以编程方式切换到另一个页面（result.HTML）。下一页只是试着打印出所有的输入值

在form.html上，我有以下内容。我使用数据将数据传送到第二页

#pageHome

是第一页上

的ID

$(document).on("pageinit","#pageHome", function(){
  $('#search').on('tap', function(event) {
    $.mobile.pageContainer.pagecontainer('change', 'result.html',
      {
        data : {
          'searchtext' : $('#searchtext').val(),
          'searchtype' : $('#searchtype').val(),
          'display' : $('input[name=display]:checked').val()
        }
      });
    )
  }
}

同样在form.html上，我尝试打印表单输入中的值：

$(document).on('pagebeforeshow', "#pageResult", function () {
    var parameters = $(this).data("url").split("?")[1].split('&');
    for (var i = 0; i < parameters.length; i++) {
      var keyval = parameters[i].split('=')
      var key = keyval[0],
          val = keyval[1];
      $('.ui-content').append('<h3>' + key + ' ' + val + '</h3>');
    }
 }

$（文档）.on（'pagebeforeshow'，“#pageResult”，函数（）{
var参数=$（this）.data（“url”）.split（“？”[1]。split（“&”）；
对于（var i=0；i

元素

#pageResult

是第二个html的

两个问题：

（1） 第二个代码我必须放在form.html中，而不是result.html，这似乎不起作用，为什么不呢

（2） 当我按下后退按钮（通过浏览器或result.html的后退按钮）时，我附加到

#pageResult

的ui内容中的内容仍然存在。事实上，它似乎位于#pageHome下。如何使其消失

编辑 form.html只包含一个“页面”、

#pageHome

，它包含一些输入、

#searchtext

、

#searchtype

，以及一个带有名称的单选按钮

display

。 html只包含一个“页面”

#pageResult

我只是在测试表单输入。我只想直接在result.html页面上打印输入值。主要问题是，当我按back按钮返回home.html时，我通过JQuery发布到result.html的html标记仍然存在

编辑2

---

Omar在聊天中更清楚地回答了问题#1。因此，在第一个HTML页面（登录页面）中只有

加载。因此，所有脚本都应该加载。外部页面中的其他

s

不会加载。说样式和代码需要进入其他页面只是为了防止用户在再次加载所有内容时通过浏览器控件刷新页面。

这并不是对您的问题的直接回答，但为什么不使用局部变量呢是否临时保存您的值

你可以像这样使用它

localStorage.searchtext = $('#searchtext').val();
localStorage.searchtype = $('#searchtype').val();
localStorage.display = $('input[name=display]:checked').val();

此外，它将被存储，只要你想，如果你去下一页或从它回来…即使用户退出你的应用程序，它将保持

当您想要删除数据时，（不需要的）您可以像这样做

localStorage.searchtext = null;
localStorage.searchtype = null;
localStorage.display = null;

这是一个非常简单方便的用法。

因为您使用的是单页模型，所以只有登录页“form.html”会被缓存，其他外部页面在导航离开它们后会从DOM中删除。在这种情况下，您不必担心刷新results.html，因为它会再次加载

要重置form.html中的表单元素，请在

form

标记中包装元素，并调用

$（“#formID”）[0]。可以随时重置（）

。例如，可以在显示form.html之前重置它

$(document).on("pagecontainerbeforeshow", function (e, data) {
  if ( data.toPage[0].id == "pageHome" ) {
    $("form", data.toPage)[0].reset();
  }
});

至于第二个问题，您选择的是

.ui content

，但它在DOM中出现了两次，分别是form.html和result.html，因此您必须具体

$(document).on('pagecontainerbeforeshow', function (e, data) {
  if ( data.toPage[0].id == "pageResult" ) {
    var parameters = data.toPage.data("url").split("?")[1].split('&');
    for (var i = 0; i < parameters.length; i++) {
      var keyval = parameters[i].split('=')
      var key = keyval[0],
          val = keyval[1];
      $('.ui-content', data.toPage).append('<h3>' + key + ' ' + val + '</h3>'); /* find content div inside page that received beforeshow event (data.toPage) */
    }
  }
});

$（文档）.on（'pagecontainerbeforeshow'，函数（e，数据）{
if（data.toPage[0].id==“pageResult”）{
var参数=data.toPage.data（“url”）.split（“？”[1]。split（“&”）；
对于（var i=0；i

---

嗯，我知道本地存储。它看起来就像一个“全球”对我来说，我只想要暂时的东西。而且，我不认为问题与存储本身有关，我在JQuery中手动编辑的HTML在按下后退按钮时不会消失。form.HTML是您的登录页吗？现在有点混乱。请澄清form.HTML和result.HTML是什么以及它们包含的页面。@Omar我制作了一个编辑。它澄清了吗？所以你想重置result.html中打印的表单和元素？或者我应该发布整个页面？当我按下“后退”时我想按钮，我应该已经回到了

#pageHome

，我不应该在

#pageResult

中看到任何东西，无论它是否从

#pageResult

中消失都不重要。问题是，当我点击后退按钮时，我仍然看到我发布到#pageResult的内容。所以，我确实在

中输入了页面id
#pageResult
$（document）.on（'pagebeforeshow'，“#pageResult”，function（）{…}）

。这并不是只选择表单.html的

#pageHome

中的那一个

。ui content

。@huggie注意到，从1.4开始，所有页面事件都以任何一种方式更改，您必须始终保持特定。

$（.ui content）

引用DOM中的第一个内容div，而

$（“.ui-content”，this）

或

$（this.find”（.ui-content）

等将针对该特定页面中的选择器。@huggie顺便说一句，

toPage

已添加到jQM 1.4.2中的所有pagecontainer事件中。因此，为了安全起见，我建议使用jQM 1.4.5。好的，至少更改为您的代码非常有效。谢谢。顺便说一句，关于我在原始帖子中的第一个问题，您有解释吗你能澄清什么是单页模型吗？显然它并不意味着“一个html文件”。那么，对于JQuery mobile来说，这不是唯一的模型？@huggie你是说第一点？所有库/样式表/js代码都应该放在所有html文件的开头。SPM：每个页面都在一个单独的html文件中。MPM：所有页面div都在一个html文件中。欢迎：）这样做