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。当我在此特定页面上按刷新时才会加载它。

所以我要求的是wherehow我是否放置了我的 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 回答