jQuery Mobile - 如何确定何时加载所有div(页面)?

时间:2015-07-17 06:49:04

标签: javascript jquery-mobile

在这个问题上,我没有回答我关于将多页文件分成碎片以便于维护的问题(参见this question),所以我继续做了。

我正在尝试根据登录条件切换第一页,但是当我在顶部附近有登录页面片段的包含但是当它在底部附近时它似乎有效。我需要一些不那么脆弱的东西,并且想知道是否有人有任何建议?

我需要知道所有页面都已加载到jQM框架中并准备好进行寻址/绑定。当然我确实试过$(document).ready({...})但没有成功。

我不在乎它是否是document.ready。我只需要知道何时加载(所有data-role = page DIV)都已完成。必须有一些我没有找到的事件。

这里似乎工作正常(如果文件的其余部分是必要的,请在评论中提及):

<?php include "fragments/_pickAuthService.html" ?>
<?php include "fragments/_main.html" ?>
<?php include "fragments/_myStuff.html" ?>
<?php include "fragments/_stuffDetail.html" ?>
<?php include "fragments/_stuffDetail-notSubscribed.html" ?>
<?php include "fragments/_rewardDetail.html" ?>
<?php include "fragments/_userProfile.html" ?>
<?php include "fragments/_setServices.html" ?>
<?php include "fragments/_authorizeServices.html" ?>

但不在这里:

<?php include "fragments/_main.html" ?>
<?php include "fragments/_myStuff.html" ?>
<?php include "fragments/_stuffDetail.html" ?>
<?php include "fragments/_stuffDetail-notSubscribed.html" ?>
<?php include "fragments/_rewardDetail.html" ?>
<?php include "fragments/_userProfile.html" ?>
<?php include "fragments/_setServices.html" ?>
<?php include "fragments/_authorizeServices.html" ?>
<?php include "fragments/_pickAuthService.html" ?>  <=== MOVED TO BOTTOM

片段只是从原始文件中取出的DIV,看起来非常像这样:

<!--  PAGE: pickAuthService -->
<div data-role="page" id='pickAuthService'>
    <div data-role="header">
    Pick a service we'll use to make sure you're you:
    </div><!-- /header -->

    <div data-role="content">
        <div id='signin_buttons'>
            <ul>
            </ul>
        </div>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

我动态加载需要通过XHR调用显示的任何值/按钮,并在显示页面之前使用jQ添加它们。

我担心的是,一旦我们受到负载并且服务器被轻微征税,使用“希望”方法会使应用程序窒息。

提前致谢,

斯科特凯伦

1 个答案:

答案 0 :(得分:1)

尝试

$( ".selector" ).on( "mobileinit", function( event ) { ... } )

在jquery移动文档中的此页面上找到 以及关于此事的此stackoverflow帖子

https://api.jquerymobile.com/mobileinit/

jQuery Mobile: document ready vs page events