gpt4 book ai didi

javascript - JQuery Mobile 想要在按下后退按钮时删除数据

转载 作者:行者123 更新时间:2023-11-30 17:09:49 25 4
gpt4 key购买 nike

在包含 HTML 表单元素的 HTML 页面 (form.html) 上,当用户点击 #search 时按钮 我想以编程方式更改到另一个页面 (result.html)。下一页只是尝试打印出所有输入值。

在 form.html 上我有以下内容。我用data把数据搬运到第二页。 #pageHome<div data-role="page"> 的 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>');
}
}

元素#pageResult<div data-role="page">第二个 html。

两个问题:

(1) 我必须将第二个代码放在 form.html 中,而不是 result.html 中,这似乎不起作用,为什么不呢?

(2) 当我按下后退按钮(通过浏览器或 result.html 的后退按钮)时,我附加到 #pageResult 的 ui-content 的内容仍然存在。事实上,它似乎在#pageHome 下。如何让它消失?

编辑form.html 只包含一个“页面”,#pageHome ,它包含一些输入,#searchtext , #searchtype , 和一个名为 display 的单选按钮.result.html 只包含一个“页面”,#pageResult .

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

编辑 2Omar 在聊天中让我更清楚地回答了问题 #1。所以,只有 <head>在第一个 HTML 页面(着陆页)中加载。所以这就是所有脚本应该去的地方。其他 <head>s在外部页面未加载。说样式和代码需要进入其他页面是为了防止用户通过浏览器控件刷新页面,然后再次重新加载所有内容。

最佳答案

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

要重置 form.html 中的表单元素,请将元素包装在 form 标记中,然后随时调用 $("#formID")[0].reset() .例如,您可以在显示 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) */
}
}
});

Demo

关于javascript - JQuery Mobile 想要在按下后退按钮时删除数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27265137/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com