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

本文介绍了使用 jQuery Mobile，onload 函数不会在 HTML 中触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个具有以下语法的 index.html 文件

<头><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><身体><a href="occassion.html"><img class="frametoicon" src="img/occasion.png"/></a></html>

然后我有 occassion.html 页面，它具有 body onload 功能如下

 <头><title>场合</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><脚本>函数加载(){警报(嗨")；}<body onLoad="loaded()"></html>

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

如果我删除了 jQuery 文件，那么它会按预期工作....我想添加什么?

这也不起作用

 $(document).ready(function () {加载()；});

编辑

我添加了

 $(document).bind("pagechange", function (event, data) {控制台日志(数据)；var toPage = data.toPage[0].id;警报(到页面)；if (toPage == "page2")警报(你好")；});

并将以下内容放入 occassion.html

你好

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

怎么样?缺少什么

解决方案

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" 元素.

I have a index.html file with following syntax

<!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.html page which has body onload function as follows

  <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 onload function is not firing up....if I try to refresh the page (occassion.html) then onload function gets fired up... why it is not working when navigated from index.html?

If I remove the jQuery files, then it works as expected....what I am missing to add?

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

<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..

How is it? what's missing

解决方案

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.load event fires, so that event will generally not fire unless you refresh the page (then window.load will fire again). It seems possible that a user could click a link and have it load before the window.load event fires, but I wouldn't expect that to be the norm.

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

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 #occasions would be the data-role="page" element in the occasions page.

这篇关于使用 jQuery Mobile，onload 函数不会在 HTML 中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！