2013-01-24 60 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我在我的個人博客。本文直接談論這個話題,所以我希望你不要把它看作是自我推銷的嘗試。

相關問題