4

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

令我惊讶的是，甚至警报（hello）都没有触发，但也没有显示 hello 并且警报（topage）是空的..

如何？少了什么东西

4

2 回答 2

9

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"场合页面中的元素。

于 2013-02-06T17:47:51.133 回答
3

编辑

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

因此，转到jquery mobile api我们看到我们有点需要pagechange或pageload事件。

于 2013-02-06T17:05:56.143 回答