Question

我目前正在使用jQuery mobile构建一个页面。我需要在一个页面上加载一些custon 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（据我所知）。这种行为是否正常？或者我做错了什么。也许甚至有一个命令不能调用哈希标记。

Answer 1

你走了：

重要的是要注意，如果您从通过AJAX加载的移动页面链接到包含多个内部页面的页面，则需要将rel =“external”或data-ajax =“false”添加到链接。这告诉框架执行整页重新加载以清除URL中的AJAX哈希。这很重要，因为AJAX页面使用散列（＃）来跟踪AJAX历史记录，而多个内部页面使用散列来指示内部页面，因此这两种模式之间的散列会发生冲突。

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

＆LT; a href =“multipage.html”rel =“external”＆gt;多页链接＆lt; / A＆GT;

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

jQuery mobile“pageinit”会在短时间内调用hashtag

1 个答案: