本文介绍了除非刷新，否则链接无法工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用JQuery mobile开发一个移动网站.我正在使用多个页面，而foobar.html的导航如下:

I am currently developping a mobile website using JQuery mobile. I am using multiple pages whitin my foobar.html to navigate as follow :

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
    <script src="jquery-js/jquery-1.10.1.js"></script>
    <script src="jquery-js/jquery.mobile-1.3.1.js"></script>
    <title>Foobar</title>
</head>

<body>
    <div data-role="page" id="foo">
        <div data-role="content">
            <a href="#bar" data-role="button">Go to Bar</a>
        </div>
    </div>

    <div data-role="page" id="bar">
        <div data-role="content">
            <p>Bar</p>
        </div>
    </div>
</body>

我加载了foobar.html文件，单击转到栏，它可以正常工作；但是，当我从index.hmtl导航到foobar.html并再次对其进行测试时，该链接无法正常工作.刷新页面即可解决问题.

I load the foobar.html file, click on Go to Bar and it works fine ; however, when I navigate from index.hmtl to foobar.html and test it again, the link fails to work. Refreshing the page solves the problem.

什么能解释这种行为以及如何解决呢?

What would explain this behavior and how to fix it?

说明

使用 jQuery Mobile 和多个HTML文件时，重要的是要了解当您从 index.html 转到 foobar.html 时> * ONLY *第一页将被加载.基本上，jQuery Mobile将剥离页面的其余部分，包括 HEAD 和其余的 BODY 内容.

Explanation

When working with jQuery Mobile and multiple HTML files it is important to understand that when you go from index.html to foobar.html *ONLY* first page will be loaded. Basically jQuery Mobile will strip rest of the page, including HEAD and rest of the BODY content.

因此，当处理多个 HTML 页时，只有第一页可以具有多个内页，所有其他 HTML 页只能具有强> 1页.在您的情况下，只有页面 #foo 被加载到DOM中，页面 #bar 被丢弃了.

So when working with several HTML pages, only first page can have several inner pages, all other HTML pages can have ONLY 1 page. In your case only page #foo was loaded into the DOM, page #bar was discarded.

此外，我还有另一个 ARTICLE ，其中描述了 jQuery Mobile 如何处理多个HTML页面加载.

Also, I have another ARTICLE where is described how jQuery Mobile handles multiple HTML page loading.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- META TAGS Declaration -->
            <meta charset="UTF-8">
            <title>TEst</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
            <script>
            $(document).on('pagebeforeshow', '#foo', function(){
                alert($('#body-test').html());
            });
            </script>
        </head>

        <body id="body-test">
            <div data-role="page" id="portfolio"  data-add-back-btn="true">
                <div data-role="content" data-theme='c' >
                    <a href="test.html" data-role="button">Go to Bar</a>
                </div>
            </div><!-- Page Project #1 -->
        </body>
</html>

test.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
        <script src="jquery-js/jquery-1.10.1.js"></script>
        <script src="jquery-js/jquery.mobile-1.3.1.js"></script>
        <title>Foobar</title>
    </head>

    <body>
        <div data-role="page" id="foo">
            <div data-role="content">
                <a href="#bar" data-role="button">Go to Bar</a>
            </div>
        </div>

        <div data-role="page" id="bar">
            <div data-role="content">
                <p>Bar</p>
            </div>
        </div>
    </body>
</html>

如果运行此示例，它将告诉您(警告您)仅加载#foo页.

If you run this example it will tell you (alert you) that only page #foo is loaded.

这篇关于除非刷新，否则链接无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

除非刷新

除非刷新，否则链接无法工作

问题描述

推荐答案

说明

Explanation

test.html