javascript 使用 jQuery Mobile，onload 函数不会在 HTML 中触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14734675/
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
Using jQuery Mobile, onload function not firing in HTML
提问by user1853803
I have a index.htmlfile with following syntax
我有一个index.html具有以下语法的文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<a href="occassion.html">
<img class="frametoicon" src="img/occasion.png" />
</a>
</body>
</html>
then I have occassion.htmlpage which has body onloadfunction as follows
然后我有occassion.html页面，其body onload功能如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Occassion</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
function loaded() {
alert("hii");
}
</script>
</head>
<body onLoad="loaded()">
</body>
</html>
but onloadfunction is not firing up....if I try to refresh the page (occassion.html) then onloadfunction gets fired up... why it is not working when navigated from index.html?
但onload函数没有启动....如果我尝试刷新页面 ( occassion.html) 然后onload函数被启动...为什么从 导航时它不起作用index.html？
If I remove the jQuery files, then it works as expected....what I am missing to add?
如果我删除了 jQuery 文件，那么它会按预期工作....我想添加什么？
This is also not working
这也不起作用
$(document).ready(function () {
loaded();
});
Edit
编辑
I added
我加了
<script>
$(document).bind("pagechange", function (event, data) {
console.log(data);
var toPage = data.toPage[0].id;
alert(toPage);
if (toPage == "page2")
alert("hello");
});
</script>
and put the following in occassion.html
并将以下内容放入 occassion.html
<div data-role="page" id="page2">
hello
</div>
To my surprise not even the alert(hello) is firing but also hello is also not displayed and alert(topage) is coming empty..
令我惊讶的是，即使 alert(hello) 也没有触发，而且 hello 也没有显示，并且 alert(topage) 是空的..
How is it? what's missing
如何？缺少了什么
回答by Jasper
jQuery Mobile uses AJAX to pull pages into the DOM, that's how it can transition between pages. When jQuery Mobile does this, there is a good chance it's doing it after the window.loadevent fires, so that event will generally not fire unless you refresh the page (then window.loadwill fire again). It seems possible that a user could click a link and have it load before the window.loadevent fires, but I wouldn't expect that to be the norm.
jQuery Mobile 使用 AJAX 将页面拉入 DOM，这就是它如何在页面之间转换。当 jQuery Mobile 执行此操作时，它很有可能在window.load事件触发后执行此操作，因此除非您刷新页面（然后window.load再次触发），否则该事件通常不会触发。似乎用户可以单击链接并在window.load事件触发之前加载它，但我不希望这成为常态。
The fix is to use jQuery Mobile specific events, in this case you're probably looking for pageload/pagecreate/pageinit, see documentation about them here: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
解决方法是使用jQuery Mobile的具体事件，在这种情况下，你可能寻找pageload/ pagecreate/ pageinit，查看他们的文档在这里：http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Here is a quick example of how this could work (this code would be located centrally and included in each document):
这是一个如何工作的快速示例（此代码将位于中央并包含在每个文档中）：
$(document).on("pageinit", "#occasions", loaded);
Note that #occasionswould be the data-role="page"element in the occasions page.
请注意，这#occasions将是data-role="page"场合页面中的元素。
回答by Ionu? Staicu
EDIT
编辑
Actually, since you use jquery mobile, probably you are looking the problem in a different place.
实际上，由于您使用 jquery mobile，因此您可能正在不同的地方寻找问题。
So, going to jquery mobile apiwe see that we kinda need pagechangeor pageloadevent.
因此，转到jquery mobile api，我们看到我们有点需要pagechange或pageload事件。
