我正在开发一个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() { ... }