2012-11-28 19 views
2

我正在使用jQueryMobile和PhoneGap開發一個跨平臺的移動應用程序。我綁定到應用程序中加載的第一個頁面(「主頁」),但pageinit事件不會觸發。這裏是我的自定義JavaScript:PhoneGap,第一頁上的jQueryMobile pageinit不會觸發

$('#home').live('pageinit', function() 
{ 
    alert('firing pageinit'); 
} 

下面是與頁面定義我的index.html文件:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> 
    <link rel="stylesheet" href="css/custom.css" /> 
</head> 
<body> 
    <div data-role="page" id="home"> 
     <div data-role="header" data-position="fixed"> 
      <a href="#refresh" data-icon="refresh" data-transition="slide" id="refresh">Refresh</a> 
      <h1>MyListingsApp</h1> 
      <a href="#add_listing" data-icon="plus" data-transition="slide" id="add_listing_button">Add</a> 
     </div> 

     <div data-role="content"> 
      <ul data-role="listview" id="listings" data-filter="true" data-filter-placeholder="Filter listings..."> 
       <li id="hit_to_begin"></li> 
      </ul> 
     </div> 

    </div> 

<script type="text/javascript" src="cordova-2.2.0.js"></script> 
    <script src="js/jquery-1.8.2.min.js"></script> 
    <script src="js/jquery.mobile-1.2.0.min.js"></script> 

    <script src="js/jquery.ui.map.full.min.js"></script> 
    <script src="js/jquery.ui.map.services.min.js"></script> 
    <script src="js/jquery.i18n.min.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
    <script type="text/javascript" src="js/custom.js"></script> 

</body> 

該事件不會觸發和我得到的是加載的網頁。根據jQueryMobile文檔,這是正確的綁定來處理頁面初始化時的自定義。

+1

或許它有助於把鏈接到你的javascript文件到頭部,而不是身體? – Taifun

+0

在PhoneGap應用程序中不需要,並且根據文檔,這是放置javascript文件的正文標籤末尾的適當位置。 –

回答

2

看看這個例子:http://jsfiddle.net/Gajotres/BGkaq/,我給你做了2個例子,你可以在頁面底部找到它們。

事件綁定示例1:

// in (url^=home) home is a page id 
$(':jqmData(url^=home)').live('pagebeforecreate',function (event) { 
    alert('Event has been triggered!');    
}); 

事件綁定示例2:

$('#home').live('pagebeforecreate',function (event) { 
    alert('Event has been triggered!');    
}); 
+0

我編輯了你的小提琴(把js移到了js窗口中,刪除了head/meta標籤),但現在它不起作用。也許這是一個jsfiddle問題。我也嘗試將'添加偵聽器'包裝到一個document.ready事件中,但是這並沒有解決它。 http://jsfiddle.net/BGkaq/12/ – dsdsdsdsd

+0

我認爲我的評論屬於固有的jsfiddle問題 – dsdsdsdsd

+0

船長在這裏顯而易見!請記住[this](http://api.jquery.com/live/):「從jQuery 1.7開始,不推薦使用.live()方法。使用.on()附加事件處理程序。舊版jQuery用戶應該優先使用.delegate()而不是.live()。「 – FranciscoBouza

相關問題