导航到不同的 html 页面时，jQueryMobile 页面事件不会触发 [英] jQueryMobile page events not firing when navigating to a different html page
问题描述
我正在尝试使用
$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)
PlayGame.html 正在转换为，但是，以下内容均未触发:
PlayGame.html is being transitioned to, however, none of the following are firing:
$(document).bind("mobileinit", function()
{
alert(1);
});
$('#gamePage').live('pageinit',function(event, ui)
{
alert('pageinit');
});
$('#gamePage').live('pagebeforeshow',function(event, ui)
{
alert('booooo');
});
但是，如果我执行 window.location.href = "PlayGame.html" 那么一切都会相应地触发.
However, if I do window.location.href = "PlayGame.html" then everything fires accordingly.
我错过了什么?
谢谢
汤姆
推荐答案
如果您示例中的代码在 PlayGame.html 文档的 中那么当 jQuery Mobile 框架通过 AJAX 抓取页面时，它不会被包含在内.这就是为什么您的自定义代码会在您加载整个页面时运行，而不是在单击另一个页面中的链接时运行.
If the code in your example is in the <head> of the PlayGame.html document then it will not be included when the jQuery Mobile framework grabs the page via AJAX. That is why your custom code runs when you load the whole page but not when clicking on a link from another page.
您要么希望将自定义 JavaScript 放在单个文件中并将其包含在每个页面中(这样无论用户从哪个页面进入您的网站，它都可用)，要么您希望为每个页面移动自定义 JavaScriptpage 进入每个页面的 <div data-role="page"> 元素(因此当页面被拉入 DOM 时它会被包含).
You will want to either put your custom JavaScript in a single file and include it on every page (so it will be available no matter what page the user enters your site from) or you will want to move the custom JavaScript for each page into the <div data-role="page"> element for each page (so it will be included when the page is pulled into the DOM).
原因是当您单击指向外部文件的链接时，jQuery Mobile 使用 AJAX 拉出 <div data-role="page"> 元素的第一个实例并将该元素放置在当前 DOM 中，文档中的其他所有内容都将被丢弃.
The reason is that when you click on a link to an external file, jQuery Mobile uses AJAX to pull out the first instance of a <div data-role="page"> element and places that element in the current DOM, everything else in the document is discarded.
这里有一些关于 jQuery Mobile 导航如何工作的建议阅读:http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html
Here is some suggested reading about how jQuery Mobile navigation works: http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html
这篇关于导航到不同的 html 页面时，jQueryMobile 页面事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
