2012-03-27 110 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,一切都会正常工作。