Question

我正在尝试使用单个AJAX调用将多个页面加载到jQuery Mobile页面中，并确保添加的页面正确增强并正常运行。我使用的是jQuery Mobile版本1.4.2。

这是我到目前为止所做的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf8">
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title>Sample</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).bind( "mobileinit", function(){
        $.mobile.useFastClick = true;
    }); 
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
    <div id = "container">
        <div data-role="page" id="initial"></div>
    </div>
    <script>
    (function() {
        function loadForm() {
            $.ajax({
                url: '../Form/form.php?platform=<?= $_GET['platform'] ?>&userid=<?= $_GET['userid'] ?>&formid=<?= $_GET['formid'] ?>',
                success: function(data) {
                    $.mobile.pageContainer.append(data).trigger('create');
                    $.mobile.loading('hide');
                    $.mobile.changePage($('#sections'));
                }
            });
        }
        $(function() {
            $.mobile.loading('show');
            loadForm();
        });
    })();
    </script>
</body>
</html>

所以我在我发布的代码中尝试做的最初是加载简单的jQuery Mobile页面，显示忙碌指示符，然后进行AJAX调用，加载几个其他页面而不只是一个。我尝试使用$ .mobile.loadPage，但也无法使用该函数，并且从文档中我可以看出，此方法假定AJAX调用将加载单个页面。

无论如何，我目前所拥有的（以及我上面发布的代码）几乎有效，但它只显示加载的第一页，当我尝试导航到应该加载的其他页面时，导航不起作用。有谁知道我如何纠正这个或知道一个更好的方法来完成我想要做的事情。

使用一个AJAX调用将多个页面注入jQuery Mobile

0 个答案: