javascript jquery pageinit 没有触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9883459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery pageinit not firing
提问by Hong Yi
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.
我有 2 个页面，我使用 swipeleft 和 swiperight 事件（来回）链接，但是当我滑动到另一个页面时，jquery 不会触发 pageinit 事件，我只剩下页眉和页脚。我应该使用 changePage 事件还是应该使用 loadPage 事件？我知道在另一个版本的 jquerymobile 中存在一个错误，其中 pageinit 事件不会触发，但我已经在使用已经解决它的 RC1 但该事件仍未触发。是什么阻止它开火？提前致谢。
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.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. 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-->
回答by codaniel
Change page is what your looking for. Load page just loads it into dom so you can manipulate before you actually show the page.
更改页面正是您要找的。加载页面只是将其加载到 dom 中，因此您可以在实际显示页面之前进行操作。
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.
绑定到 page init 时，请确保使用唯一 ID 绑定 pageinit 事件。它们不能同时具有 id="#index"。还要确保将页面初始化绑定到每个页面。您的代码只会为#index 页面而不是 teamliquid.html 触发 pageinit。
Use the following in the <head></head>of your documents:
在<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" });
});
or to get pageinit for fire for every page
或为每个页面获取 pageinit 以触发
$(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 recommended 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.net/codaniel/cEWpy/2/
从 jquery 1.7 开始，绑定、实时和委托都使用 .on() 方法。这是为 JQM 绑定 pageinit 的推荐方式。你也可以做一些很酷的事情，比如用 '[data-role=page]' 替换 '#index' 来让你的代码在每个页面上都触发。这是一个 JSfiddle，证明这确实有效。http://jsfiddle.net/codaniel/cEWpy/2/
回答by Johannes Egger
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.
尝试使用$(function() { /* dom ready */ });
而不是$('#index').bind("pageinit", (function () { ... }));
然后您可以将脚本标签放在头标签中，删除第</script>9 行的孤立标签，您将拥有干净的 HTML，一切都会正常进行。
