2012-03-27 48 views
5

我有2頁使用swipeleft和swiperight事件(來回)鏈接,但是當我滑動到其他頁面時,jquery不會觸發pageinit事件,並且只剩下標題和頁腳。我應該使用changePage事件還是應該使用loadPage事件?我知道在其他版本的jquerymobile中有一個錯誤,pageinit事件不會觸發,但我已經使用已經解決了它的RC1,但事件仍然沒有觸發。什麼阻止它開火?提前致謝。jquery pageinit沒有射擊

守則如下:

 <!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>esports</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
<link rel="stylesheet" href="jquery.zrssfeed.css" /> 
</script> 

<style> 


</style> 
</head> 
<body> 
<!-- index --> 
<div data-role="page" id="index"> 
    <div data-role="header"> 
     <h1>esports times</h1> 
    </div> 
    <!--/header--> 
    <div data-role="content" id="content"> 
     <div id="currentFeed">teamliquid. &nbsp; skgamin</div> 
     <ul id="rssFeed" data-role="listview"> 
     </ul> 
    </div> 
</div> 

</body> 
</html> 

<!-- load javscripts here--> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js">  </script> 
<script src="jquery.zrssfeed.js"></script> 
<script> 
    $('#index').bind("pageinit", (function() { 
     $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', { 
      limit: 10, 
      date: false, 
     }); 
    })); 

    $('#index').bind("swipeleft", function() { 
     $.mobile.changePage("teamliquid.html", "slide", true, false); 
    }); 
</script> 

<!-- /javascript--> 

回答

6

更改頁面是您的需求。加載頁面只會將它加載到dom中,因此您可以在實際顯示頁面之前進行操作。

綁定到頁面init時,請確保使用唯一的id綁定您的pageinit事件。他們不能同時擁有id =「#index」。還要確保將頁面初始化綁定到每個頁面。您的代碼只會爲#index頁面而不是teamliquid.html啓用pageinit。

使用在文檔中的<head></head>如下:

$(document).on('pageinit','#index', function(){ 
    $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', { 
     limit: 10, 
     date: false, 
    }); 
}); 
$(document).on('pageinit','#otherpage', function(){ 
    ... This would be for the other page you are referring to.... 
}); 
$(document).on('swipeleft','#index', function(){ 
    $.mobile.changePage("teamliquid.html", { transition: "slide" }); 
}); 
$(document).on('swiperight','#otherpage', function(){ 
    $.mobile.changePage("index.html", { transition: "slide" }); 
}); 

或獲得pageinit消防每一頁

$(document).on('pageinit','[data-role=page]', function(){ 
    ....ground breaking code...  
}); 

在jQuery 1.7綁定的,活的,並代表所有使用.on()方法。這是綁定JQM的pageinit的推薦方式。你也可以做一些很酷的事情,比如用'[data-role = page]'代替'#index'來讓你的代碼在每一頁上都被觸發。這是一個JSfiddle,證明這確實起到了作用。 http://jsfiddle.net/codaniel/cEWpy/2/

+0

這可能是我正在尋找,但只是意識到,Windows Phone 7手機差距不支持刷卡事件。 :(謝謝你的幫助,非常感謝。 – 2012-03-29 18:46:02

-1

嘗試使用
$(function() { /* dom ready */ });
,而不是
$('#index').bind("pageinit", (function() { ... }));

然後,你可以把腳本標籤頭標記中,第9行刪除孤立</script>你有乾淨的HTML,一切都會正常工作。