1

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

我在正确加载我的 javascripts 时遇到了一个严重的问题。它真的让我发疯，因为我无法理解发生了什么/为什么发生。

我有一个页面，它有一个导航栏，上面有 2 个水平按钮，可以通向 2 个不同的页面。这两个页面都会加载facebook javascript API并动态地向我们展示来自 2 个不同 facebook 页面的照片。

我的问题：

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

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

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

它看起来像这样：

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

对于我拥有的第一页，javascript 会很好地加载并向我显示图片。

然而，当我通过导航栏导航到那里时，它不会加载 javascript。仅当我在此特定页面上按刷新时才会加载它。

所以我要求的是where，how我是否放置了我的 javascript，以便它们在每次加载页面时都执行？

我的代码如下所示：

<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() { ... }
4

1 回答 1

1

下面的文字很好地解释了你需要在哪里添加你的 JS。

资料来源：Jquery 移动食谱

您需要知道在使用 Ajax 导航时，<head> 部分仅在您的应用程序的首页或主页面上处理。其余每个页面的 <head> 元素将被忽略，仅执行其页面 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) 将其附加到文档中。这样，您不需要在每个页面上设置脚本，而是在 <head>

<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;

然后在 <HEAD> 中将其设置为：

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

看你怎么走...

希望有帮助...

于 2013-08-14T13:53:42.680 回答