admin管理员组文章数量:1353125
I have 2 pages that I linked using swipeleft and swiperight event(back and forth) but when I swipe to the other page, jquery doesn't fire the pageinit event and I am left with just the header and footer. Should I be using the changePage event or should I be using the loadPage event? I know that there is a bug in the other version of jquerymobile where pageinit event does not fire but I am already using the RC1 which has already solved it but the event is still not firing. what is stopping it from firing? Thanks in advance.
Code is as follow:
<!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=".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. skgamin</div>
<ul id="rssFeed" data-role="listview">
</ul>
</div>
</div>
</body>
</html>
<!-- load javscripts here-->
<script src=".7.1.min.js"></script>
<script src=".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('', {
limit: 10,
date: false,
});
}));
$('#index').bind("swipeleft", function () {
$.mobile.changePage("teamliquid.html", "slide", true, false);
});
</script>
<!-- /javascript-->
I have 2 pages that I linked using swipeleft and swiperight event(back and forth) but when I swipe to the other page, jquery doesn't fire the pageinit event and I am left with just the header and footer. Should I be using the changePage event or should I be using the loadPage event? I know that there is a bug in the other version of jquerymobile where pageinit event does not fire but I am already using the RC1 which has already solved it but the event is still not firing. what is stopping it from firing? Thanks in advance.
Code is as follow:
<!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./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. skgamin</div>
<ul id="rssFeed" data-role="listview">
</ul>
</div>
</div>
</body>
</html>
<!-- load javscripts here-->
<script src="http://code.jquery./jquery-1.7.1.min.js"></script>
<script src="http://code.jquery./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./reuters/oddlyEnoughNews', {
limit: 10,
date: false,
});
}));
$('#index').bind("swipeleft", function () {
$.mobile.changePage("teamliquid.html", "slide", true, false);
});
</script>
<!-- /javascript-->
2 Answers
Reset to default 7Change page is what your looking for. Load page just loads it into dom so you can manipulate before you actually show the page.
When binding to page init make sure your binding your pageinit event using a unique id. They cannot both have id="#index". Also make sure you bind page init to each page. Your code would only have the pageinit firing for just the #index page and not the teamliquid.html.
Use the following in the <head></head> of your documents:
$(document).on('pageinit','#index', function(){
$('#rssFeed').rssfeed('http://feeds.reuters./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" });
});
or to get pageinit for fire for every page
$(document).on('pageinit','[data-role=page]', function(){
....ground breaking code...
});
As of jquery 1.7 bind, live, and delegate all use the .on() method. It is the remended way of binding your pageinit for JQM. You can also do cool things like replacing '#index' with '[data-role=page]' to make your code fire on every page. Here is a JSfiddle demonstrating that this indeed did work. http://jsfiddle/codaniel/cEWpy/2/
Try to use $(function() { /* dom ready */ });
instead of $('#index').bind("pageinit", (function () { ... }));
Then you can put the script-tags inside the head-tag, delete the orphaned </script> on line 9 and you have clean HTML and everything will work fine.
本文标签： javascriptjquery pageinit not firingStack Overflow
版权声明：本文标题：javascript - jquery pageinit not firing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743905920a2559519.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论