2

我试图阻止 Jquery Mobile 初始化，直到页面内容被加载，但我没有得到想要的结果。该项目是一个简单的问题/答案测验。在我的 HTML 文档中，我有 3 个容器 div[data-role=page]：

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#result

我的 document.ready() 解析一个外部 JSON 文件以将内容加载到这些页面，将 #q0 复制到测验中的问题数。最终结果是这样的：

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#q1
div[data-role=page]#q2
div[data-role=page]#q3
div[data-role=page]#q4
div[data-role=page]#result

在我的文件头中，我有：

<script>
    $(document).bind("mobileinit", function () {
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="js/quiz.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html说要在加载 Jquery Mobile 之前配置设置，我已经这样做了。在 quiz.js 结束时，我调用了初始化页面：

$(document).ready(function(){

    // ... all the code to load JSON quiz content is here

    $.mobile.initializePage();
});

我的问题是，当我从标题页进入第一个问题页时，我看到所有问题同时出现。呈现的 HTML 如下所示：

<div data-role="page" id="q0" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q1" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q2" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q3" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q4" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>

在 document.ready() 之后但在 mobile.initializePage 被调用之前，HTML 呈现为：

<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q4" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q5" class="pg_type_question" data-title="Quiz Title">...</div>

我不明白为什么每个问题页面都使用“q0”的数据 URL 变得活跃。

在此先感谢您的帮助！

4

1 回答 1

3

不看完整版就有点难说了。这是我将您所描述的内容放在一起的示例。autoInitializePage设置为 false （在jQuery Mobile 加载之前），一些元素会在页面加载后添加到 DOM 中，然后$.mobile.initializePage();在我们完成页面操作后调用。jQuery Mobile 然后按预期对其进行初始化，并且导航链接似乎可以正常工作。

<html> 
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.autoInitializePage = false;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').append(
                '<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 1</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q2" data-role="button">To Page 2</a></p>' +
                    '</div>' +
                '</div>' +
                '<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 2</h1>' +
                    '</div>' +
                    '<div data-role="content">  ' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q3" data-role="button">To Page 3</a></p>  ' +
                    '</div> ' +
                '</div>' +
                '<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 3</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>The End</h2>' +
                    '</div>' +
                '</div>'
            );

            $.mobile.initializePage();
        });
    </script>
  </head> 
  <body>
    <div data-role="page" id="title" data-title="Quiz Title">
        <div data-role="header">
            <h1>Title Page</h1>
        </div>
        <div data-role="content">
            <h2>Welcome</h2>
            <p><a href="#q1" data-role="button">To Page 1</a></p>
        </div>
    </div>
  </body>
</html>

在玩的过程中，我确实注意到[div data-role="page"]元素确实需要是彼此的兄弟姐妹；检查以确保您不会不小心将它们全部附加到标题页或正文以外的父元素。

如果您正在调用外部 JSON 源，您需要确保$.mobile.initializePage();在完成回调中处理调用；否则，您最终可能会遇到在$.mobile.initializePage();对 JSON 源的 AJAX 调用完成之前调用的竞争条件。

希望这可以帮助！

于 2012-07-11T15:23:43.743 回答