导航到不同的html页面时,jQueryMobile页面事件不会触发

Tom*_*eck 3 jquery-mobile

我正在尝试使用导航到不同的.html页面

$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)
Run Code Online (Sandbox Code Playgroud)

PlayGame.html正在转换为,但是,以下都没有触发:

$(document).bind("mobileinit", function()
{
alert(1);
});

$('#gamePage').live('pageinit',function(event, ui)
{
    alert('pageinit');  
});

$('#gamePage').live('pagebeforeshow',function(event, ui)
{
    alert('booooo');
});
Run Code Online (Sandbox Code Playgroud)

但是,如果我这样做,window.location.href = "PlayGame.html"那么一切都会相应地发射.

我错过了什么?

谢谢

汤姆

Jas*_*per 20

如果在您的示例代码中<head>的的PlayGame.html文件,那么它不会被当jQuery Mobile框架通过AJAX抓取的页面包括在内.这就是为什么您的自定义代码在加载整个页面时运行而不是在单击其他页面的链接时运行的原因.

您需要将自定义JavaScript放在一个文件中,并将其包含在每个页面上(因此无论用户从哪个页面进入您的网站,它都可用)或者您希望将每个页面的自定义JavaScript移动到<div data-role="page">每个页面的元素(因此当页面被拉入DOM时将包含它).

原因是当您单击指向外部文件的链接时,jQuery Mobile使用AJAX提取<div data-role="page">元素的第一个实例并将该元素放在当前DOM中,文档中的其他所有内容都将被丢弃.

以下是关于jQuery Mobile导航如何工作的一些建议阅读:http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html