使用 jQuery Mobile，onload 函数不会在 HTML 中触发答案

【问题标题】：Using jQuery Mobile, onload function not firing in HTML使用 jQuery Mobile，onload 函数不会在 HTML 中触发
【发布时间】：2013-02-06 17:02:58
【问题描述】：

我有一个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>

然后我有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>

但是onload 函数没有启动....如果我尝试刷新页面 (occassion.html) 然后onload 函数被启动...为什么从index.html 导航时它不工作?

如果我删除 jQuery 文件，那么它会按预期工作....我缺少什么要添加的内容？

这也不行

 $(document).ready(function () {
        loaded();
    });

编辑

我加了

 <script>
    $(document).bind("pagechange", function (event, data) {
        console.log(data);
        var toPage = data.toPage[0].id;
        alert(toPage);
        if (toPage == "page2")
            alert("hello");
    });
</script>

并将以下内容放入 occassion.html

<div data-role="page" id="page2">
 hello
 </div>

令我惊讶的是，甚至 alert(hello) 都没有触发，而且 hello 也没有显示，并且 alert(topage) 为空..

怎么样？缺少什么

【问题讨论】：

你为什么用onLoad而不是$(document).ready？
不是答案，但正确的拼写是场合......
您正在使用 jQuery - 不要使用 onload，而是依赖脚本中的 $(function(){ .. }) 块。
如果您在使用 jQuery 时仍在使用内联 JavaScript，那么您真的需要重新考虑整个方法。

标签： javascript jquery html jquery-mobile

【解决方案1】：

jQuery Mobile 使用 AJAX 将页面拉入 DOM，这就是它可以在页面之间转换的方式。当 jQuery Mobile 执行此操作时，它很有可能在 window.load 事件触发后执行此操作，因此该事件通常不会触发，除非您刷新页面（然后 window.load 将再次触发）。用户似乎可以在window.load 事件触发之前单击链接并加载它，但我不希望这是常态。

解决方法是使用 jQuery Mobile 特定事件，在这种情况下，您可能正在寻找 pageload/pagecreate/pageinit，请在此处查看有关它们的文档：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

这是一个如何工作的简单示例（此代码将位于中心并包含在每个文档中）：

$(document).on("pageinit", "#occasions", loaded);

请注意，#occasions 将是场合页面中的 data-role="page" 元素。

【讨论】：

$(document).bind("pagechange", function (event, data) { var toPage = data.toPage[0].id; if (toPage == "page2") alert("你好"); });

【解决方案2】：

编辑

实际上，由于您使用的是 jquery mobile，因此您可能正在其他地方寻找问题。

所以，转到jquery mobile api，我们发现我们有点需要pagechange 或pageload 事件。

【讨论】：

@crush，user1853803 也在他的 OP 中声明，“如果我删除 jquery 文件，那么它会按预期工作”，所以我的评论以上是一个提醒，这个答案有效，但它需要 jQuery。
@Sparky document.ready 建议不适用于 jQuery Mobile 通过 AJAX 抓取的页面，这是默认方法。通过删除 jQuery，您不再使用 jQuery Mobile 而是正常打开链接，而不是在加载 jQuery/jQM 时使用 AJAX。
@Jasper，是的，谢谢......我已经明白了。我制作了最初的 cmets，因为 OP 从未提及 jQuery Mobile。是的，我知道，我错过了隐藏在他的代码中的内容。我现在编辑了他的标题以使其更清楚。