Question

我尝试使用AJAX（默认情况下）从jquery移动页面中的链接（称之为第一页）加载页面（称之为第二页）。第二页包含进度条（jquery-ui）。当我点击第一页的链接时，旋转轮连续旋转，第二页永远不会加载。我应该知道的事情？我看了很多不同的帖子，但没有发现任何回答我的问题...

这是第一页代码：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="first_page" data-title="MediaManager">
            <a href="second_page.php">Espace disque</a>
        </div>
    </body>
</html>

这是第二页代码：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    </head>
    <body>
        <div id="progressbar"></div>
        <script>
                $( "#progressbar" ).progressbar({max: 10 });
                $( "#progressbar" ).progressbar({value: 3 });
        </script>
    </body>
</html>

感谢您的帮助！

Answer 1

Omar帮助我解决了我的问题。

JQM在使用AJAX调用时不使用，因此我必须包含jquery-ui。我已经从第一页删除了已经加载到DOM中的jquery-core。最后，我必须在pagecontainer事件中分配我的jquery脚本。

以下是我的第二页中的代码：

<html>
    <head>
        <meta charset="utf-8">

    </head>
    <body>
        <div data-role="page" id="disk-space" data-title="Espace disque">
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
            <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

            <div id="progressbar"></div>
            <script>
                $(document).on("pagecontainershow", function () {
                    $( "#progressbar" ).progressbar({max: 10 });
                    $( "#progressbar" ).progressbar({value: 3 });
                });
            </script>
        </div>
    </body>
</html>

谢谢奥马尔！： - ）

AJAX加载和进度条不兼容？

1 个答案: