编辑：

Question

我正在开发一个jQuery Mobile网站。我使用Multi-Page结构，这意味着我将所有页面都放在单 html文件中。

我正确加载我的javascripts时出现严重问题。它实际上让我发疯，因为我无法理解发生了什么/为什么会发生。

我有一个页面，其中有一个 navbar ，上面有2个水平按钮，可以显示2个不同的页面。两个页面都将加载facebook javascript API并动态显示来自2个不同Facebook页面的照片。

我的问题：

我应该把我所拥有的每个不同页面的javascript文件（调用facebook API）放在哪里？

如果我把javascripts放在我的html页面的头部，那么永远不会加载。

我尝试在每个页面content div的末尾调用javascript。

看起来像是：

$('#xxx').on("pageshow", function() { ... }

对于我拥有的第一页，javascript将加载正常并向我展示图片。

然而第二个当我在导航栏中导航时，它不会加载javascript。它将仅加载 IF 我在此特定页面上按下刷新。

所以我要求的是where和how我是否放置了我的javascripts，以便它们执行每次页面已加载？

我的代码如下所示：

<div data-role="page" id="photosNJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header" data-id="fixedNav" data-position="fixed">
        <h1>Application Title</h1>
        <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#photosNJ" class="ui-btn-active ui-state-persist">Photos Noche Joven</a></li>
                <li><a href="#photosEJ">Photos Espacio Joven</a></li>
                <li><a href="#videos">Videos</a></li>
            </ul>
        </div> <!-- /navbar -->
    </div> <!-- /header -->
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" class="albums">  
            <!-- Here the albums are created through javascript (createAlbums.js) -->
        </ul>       
        <button type="button" id="loadMoreAlbums">More Albums...</button>   
        <script type='text/javascript' src='javascript/createFbAlbums.js'></script> 
    </div> <!-- /content -->
    <!-- <div id="fb-root"></div> -->

</div>


<div data-role="page" id="photosEJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header" data-id="fixedNav" data-position="fixed">
        <h1>Application Title</h1>
        <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#photosNJ">Photos Noche Joven</a></li>
                <li><a href="#photosEJ" class="ui-btn-active ui-state-persist">Photos Espacio Joven</a></li>
                <li><a href="#videos">Videos</a></li>
            </ul>
        </div> <!-- /navbar -->
    </div> <!-- /header -->
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" class="albums2"> 
            <!-- Here the albums are created through javascript (createAlbums.js) -->
        </ul>       
        <button type="button" id="loadMoreAlbums2">More Albums...</button>  
        <script type='text/javascript' src='javascript/createFbAlbums2.js'></script>    
    </div> <!-- /content -->
    <!-- <div id="fb-root"></div> -->
</div>

javascript文件都是这样开始的：

$('#xxx').on("pageshow", function() { ... }

Answer 1

以下文字解释了您需要添加JS的位置。

来源：Jquery mobile Cookbook

您需要知道何时使用Ajax导航，＆lt;头＆gt;部分仅在应用的第一页或主要部分处理。＆lt;头＆gt;忽略每个剩余页面的元素，只执行它们的页面div容器。因此，为了确保您的脚本在这些页面中执行，您必须在页面的div容器中包含该标记。

所以你可以做到以下几点：

a）在页面div中添加事件：

<div data-role="page" id="photosEJ" data-theme="a" 
    data-add-back-btn="true" data-back-btn-text="Back">
    <script>
        $('#photosEJ').on('pageshow', function() {

        });
    </script>
    <div data-role="header" data-id="fixedNav" data-position="fixed">

或者， b）将其附在文件上。这样，您不需要在每个页面上设置脚本，而是在＆lt;头＆gt;

<script>
   $(document).off('pageshow').on('pageshow', '#photosEJ', function() {
   ....
   });
</script>

（可选）我通常声明关闭/打开以防万一，某些事件会触发两次。

编辑：

发表评论后，您能否做到以下几点：在您的脚本中声明如下：

$(document).off('pageshow').on("pageshow", '#photosNJ', function() {
    var albumPhotos = new Array();
    var albumThumbnails = new Array();
    var x=0;
    var next;
    var times=0;
    var dataLength=0;

然后在＆lt; HEAD＆gt;将其设置为：

<head>
    <script type='text/javascript' src='javascript/createFbAlbums.js'></script>
</head>

看你怎么去......

希望有帮助...

为什么我的脚本没有加载，jQuery Mobile？

1 个答案:

编辑：