2013-01-24 59 views
4

我有两页,test1.html和test2.html。每当这些页面中的一个可见时,我想执行一些代码。jQuery mobile,多页面的pageshow事件

这里有两页:

test1.html:

<!DOCTYPE html> 
<html><head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>test1</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" /> 
    <script src="js/jquery.js"></script> 
    <script src="js/jquery.mobile-1.2.0.js"></script> 
</head><body> 

<div data-role="page" id="test1"> 

    <div data-role="content"> 

    <a href="test2.html" data-role="button">jump to test2</a> 

    </div> 

</div> 

<script type="text/javascript"> 

$(document).on('pageshow', '#test1', function (data) { 
    alert('pageshow test1'); 
}); 

</script> 
</body></html> 

test2.html:

<!DOCTYPE html> 
<html><head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>test1</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" /> 
    <script src="js/jquery.js"></script> 
    <script src="js/jquery.mobile-1.2.0.js"></script> 
</head><body> 

<div data-role="page" id="test2"> 

    <div data-role="content"> 

    <a href="test1.html" data-role="button">jump to test1</a> 

    </div> 

</div> 

<script type="text/javascript"> 
$(document).on('pageshow', '#test2', function (data) { 
    alert('pageshow test2'); 
}); 
</script> 

</body></html> 

当我开始test1.html我得到的只是test1的警报(也是每当我回到它),但从来没有test2.html。

我需要的是每个页面都有不同的显示处理程序。

回答

2

可用的解决方案

解决方案1 ​​

首先,从页面BODY删除JavaScript代码,并把它变成一个单一的js文件。在js/jquery.mobile-1.2.0.js初始化后,应该将新的js文件放入HEAD

事情是这样的:

<script src="js/jquery.js"></script> 
<script src="js/jquery.mobile-1.2.0.js"></script> 
<script src="js/custom.js"></script> 

在你的情况jQuery Mobile的加载第二HTML文件,但只有这一部分:

<div data-role="page" id="test2"> 
    <div data-role="content"> 
     <a href="test1.html" data-role="button">jump to test1</a> 
    </div> 
</div> 

将装有阿贾克斯到DOM结构。这是不执行第二页脚本的主要原因。

解决方案2

二的解决办法是使用你的链接rel="external"属性,它会强制重新加载页面每次新页面打开。

<a href="test1.html" data-role="button" rel="external">jump to test1</a> 

不管如何,如果可能的话从来不使用SCRIPT标签页BODY里面,它会工作,但同时也可能会导致其他问题

更多信息

如果您想了解更多关于这个问题,如何解决这个问题+例子看看这个article我在我的个人博客。本文直接谈论这个话题,所以我希望你不要把它看作是自我推销的尝试。

相关问题