0

我目前正在使用 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（据我所知）。这种行为正常吗？还是我做错了什么。也许甚至有一个不调用哈希标签的命令。

4

1 回答 1

1

干得好：

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

例如，指向包含多个内部页面的页面的链接如下所示：

<a href="multipage.html" rel="external">多页链接</a>

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

于 2013-02-23T18:23:03.533 回答