jQuery mobile "pageinit" 短时间调用 hashtag答案

【问题标题】：jQuery mobile "pageinit" calls hashtag for short timejQuery mobile "pageinit" 短时间调用 hashtag
【发布时间】：2013-02-23 15:53:51
【问题描述】：

我目前正在使用 jQuery mobile 构建一个页面。我需要在一页上加载一些自定义 JavaScript，所以我找到了 pageInit 函数。这是我正在使用的一个简短示例：

page1.html:

<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page 1 Title</h1>
    </div>

    <div data-role="content">
        <a href="page2.html">go to page2</a>
        <p>Page 1 content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>Page 1 Footer</h4>
    </div>
</div>

page2.html:

<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Page 2 Title</h1>
    </div>

    <div data-role="content">
        <a href="page1.html">go to page1</a>
        <p id="addstuff">Page 2 content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>Page 2 Footer</h4>
    </div>
</div>

js.js

$(document).delegate('#page2', 'pageinit', function() {
    $('<div />', {
        html: 'Some text that was added via jQuery'
    }).appendTo('#addstuff');
});

所以我需要在 page2.html 上执行一些 JavaScript。它实际上很好用（创建了 div 并且您看到了文本）。但是当我单击链接来更改页面时，您可以看到，jQuery 首先调用 URL 中的主题标签。所以它看起来像：

example.org/page1.html#/page2.html

当我点击 page1.html 上的链接时（可能只有几毫秒），然后它重定向到

example.org/page2.html

我猜这是因为 id .. 但我需要这个用于 pageInit（据我所知）。这种行为正常吗？还是我做错了什么。也许甚至有一个不调用哈希标签的命令。

【问题讨论】：

标签： ajax jquery-mobile page-init

【解决方案1】：

给你：

请务必注意，如果您从通过 AJAX 加载的移动页面链接到包含多个内部页面的页面，则需要将 rel="external" 或 data-ajax="false" 添加到关联。这告诉框架重新加载整个页面以清除 URL 中的 AJAX 哈希。这一点很关键，因为 AJAX 页面使用哈希 (#) 来跟踪 AJAX 历史，而多个内部页面使用哈希来指示内部页面，因此这两种模式之间的哈希会发生冲突。

例如，指向包含多个内部页面的页面的链接将看起来像这样：

多页链接

源：http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument

【讨论】：

谢谢，但实际上页面通过 Ajax 加载也没问题。由于 JavaScript 的 pageInit，我只使用 id。但我不想重新加载整个页面。
我相信你需要在URL中加上#标签，然后体验到的行为是正常的。 “AJAX 页面使用哈希 (#) 来跟踪 AJAX 历史记录。”如果您没有将 rel="external" 或 data-ajax="false" 添加到 URL，那么您正在使用 AJAX 导航系统，并使用 # 标记。