仅在新创建页面时运行某些内容，而不是在从另一个页面返回时运行 [英] Running something only when a page is newly made, not when going back from another page
问题描述
关于pagecreate事件，与ajax加载一起使用，我不了解.
There is something about the pagecreate event, used with ajax loading, which I do not understand.
问题出在多页前后转换上的事件触发上.
The problem is on event firing on multi-page back-and-forth transitions.
// only on page a
$(document).on("pagecreate", function (e) {
alert('on pagecreate\n' + $(e.target).attr('id') )
});
// only on page a, ends
// each page
page a is <div data-role="page" id="page-a">
page b is <div data-role="page" id="page-b">
page c is <div data-role="page" id="page-c">
-
1. p) Load a -> alert a (expected)
q) a go to b -> alert b (expected)
r) b back to a -> no alert on a (good)
2. s) Load a -> alert a (expected)
t) a go to b -> alert b (expected)
u) b go to c -> alert c (expected)
v) c back to b -> alert b (unexpected)
w) b back to a -> no alert on a (strange)
奇怪吗?
v)很奇怪:为什么r)不会发出警报，而v)会发出警报?
Strange?
v) is strange: why r) does not alert but v) does?
w)甚至更陌生:为什么v)发出警报，而w)却没有?
w) is even stranger: why v) alerts but w) does not?
3. (Here in 3., you type in the URL of a only once.
NO refresh/F5 key in the whole process)
.
Load a -> alert a
a go to b -> alert b
b go to c -> alert c
.
c back to b -> no alert
b back to a -> no alert
.
a go to b -> alert b
b back to a -> no alert
.
a go to b -> alert b
b go to c -> alert c
c go to d -> alert d
.
d back to c -> no alert
c back to b -> no alert
也就是说，仅在新建页面时发出警报.回去永远不会发出警报.
That is, alert only when a page is newly made. Going back never alerts.
推荐答案
更新
如果只想在前向导航中运行代码，请侦听pagecontainerbeforechange或pagecontainerbeforetransition并从options对象检索导航方向.
Update
If you want to run code only in forward navigation listen to either pagecontainerbeforechange or pagecontainerbeforetransition and retrieve navigation direction from options object.
我将使用beforetransition，因为它在导航时会触发一次，而beforechange会触发两次.
I will use beforetransition because it fires once upon navigating, unlike beforechange which fires twice.
如果options.direction不返回back，请按以下方式运行代码.
If options.direction doesn't return back, run your code as follows.
$(document).on("pagecontainerbeforetransition", function (e, data) {
if ( typeof data.options.direction != "undefined" && data.options.direction != "back" ) {
$(document).one("pagecontainershow", function (e, data) {
alert(data.toPage[0].id);
});
}
});
我只使用pagecontainershow一次来显示警报.使用它来运行所需的任何功能.
I used pagecontainershow one time only to show alert. Use it to run any function you want.
因为您使用的是单页模型，所以每个页面div都位于单独的文件中. SPM中jQuery Mobile的默认行为是，一旦您将外部页面从DOM中删除，它们就会从DOM中删除.页面"a"是登录页面，已缓存且从未删除.
Because you are using a Single Page Model, each page div is in a separate file. The default behavior of jQuery Mobile in SPM is that external page are removed from DOM once you navigate away off them. Page "a" is landing page, it is cached and never removed.
当从"a"导航到"b"时，您会在"b"中收到警报.当您从"b"导航到"c"时，"b"已从DOM中删除，并且"c"已加载并创建.您也在那里收到了警报.当您从"c"导航回"b"时，将删除"c"，并创建并创建"b".导航回"a"并不会重新加载它，因为它已被缓存(登录页面).
When navigate from "a" to "b" you get an alert in "b". When you navigate from "b" to "c", "b" is removed from DOM and "c" is loaded and created. You got an alert there too. When you navigate back to "b" from "c", "c" is removed and "b" is loaded and created. Navigating back to "a" doesn't reload it because it is cached (landing page).
如果您希望外部页面保留在DOM中，请按照此答案中的内容进行缓存.回答您最近的一个问题.
If you want external pages to remain in DOM, cache them as in this answer to one of your recent questions.
或为每个外部页面div 指定一个唯一的ID，然后一次pagecreate运行.one().
Or give each external page div a unique ID and run pagecreate one time .one().
$(document).one("pagecreate", "#pageB", function (e) {
alert("created: " + this.id);
});
这篇关于仅在新创建页面时运行某些内容，而不是在从另一个页面返回时运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
