个人中心
gpt4 book ai didi

通过 listview，jquery mobile 导航时，Javascript 不运行

转载 作者：行者123 更新时间：2023-11-30 17:55:07 24 4
gpt4 key购买 nike

我正在开发一个 jquery 移动网站，我在运行 javascript 代码时遇到了一些问题。

我有一个主页 index.html，它基本上是一个用于导航到各种 html 页面的 ListView 。我的页面使用单页结构，这意味着每个 1 个 html 文件包含 1 个页面。现在从主页，我导航到另一个我正在使用 persistent NavBar 的页面。带有一个带有 2 个选项的水平按钮。一个是照片，另一个是多媒体。

对于照片，我使用 Javascript FB API 从 FB 页面下载照片，然后使用 PhotoSwipe 插件将它们呈现给用户。

问题..

如果我运行 photos.html 页面，它将运行良好并加载相册。我的 javascript 做了两件事。 1) 使用 FB API 获取相册、照片、封面照片等。 2) 使用此相册及其照片动态创建 ListView 。在这种情况下，两者都很好用!

但是，当我在 index.html 中并通过 ListView 导航到 photos.html(照片是持久导航栏中默认选择的按钮)时，Javascript 代码不起作用。 Like 根本没有被调用..

index.html 看起来像:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="themes/EspacioJoven.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="themes/custom.css" />
</head> 
<body> 

<div data-role="page" id="home" data-theme="a">
    <!--
    <div data-role="header">
        <h1>Application Title</h1>
    </div>
    -->
    
    <div data-role="content">   
    
        <h2 id="banner">Joven Mobile</h2>
        <div class="main_menu">
            <ul data-inset="true" data-role="listview">
                <li><a href="EcioJven.html"><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</a></li>
                <li><a href="NeJoven.html"><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</a></li>
                <li><a href="photos.html"><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</a></li>
                <li><a href="SajhrJoven.html"><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</a></li>
            </ul>   
         </div> 
    </div>
    
    <!--
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
    -->
    
</div>
</body>
</html>

photos.html 看起来像:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="themes/EspacioJoven.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="themes/custom.css" />
    
    <!-- Needed from PhotoSwipe Plugin -->
    <link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
    <link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="photoSwipe/klass.min.js"></script>
    <script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
    <script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script> 
    <!-- Needed from PhotoSwipe Plugin --> 
    
</head>
<body> 

    <div data-role="page" id="photos" 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="photos.html" class="ui-btn-active ui-state-persist">Photos</a></li>
                    <li><a href="videos.html">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> 
        </div><!-- /content -->
    </div><!-- /page -->
   
    <div id="fb-root"></div>
    
    <script type='text/javascript' src='javascript/createAlbums3.js'></script>
    
</body>
</html>

如您所见，我最后调用了我的 javascript。任何想法为什么它从未被调用过？如果我刷新页面，这意味着运行 photos.html，它将正常加载。

实际上，我还查看了调试器中的“元素”表。当我在 index.html 页面中时，html 元素似乎都是正确的。当我过渡到 photos.html 页面时，通过查看元素表我发现它们没有改变!标题确实改变了，但其余部分保持不变，这真是不可思议？!这到底是怎么发生的？看起来是同一个页面，具有相同的 css 和 javascript 源，但应该不同!如您所见，我使用 photoSwipe javascript、css 等!只有当我重新加载页面时，元素才是正确的。请问有什么想法吗？我不知道这里发生了什么。

同样出于某种原因，我在从一页到另一页的转换过程中得到了 304 Status , Not Modified。

最佳答案

这是因为当您导航到 jQuery Mobile 中的页面时，默认情况下它会尝试拉取 JQM 页面(data-role="page"(如果没有数据- role='page' 然后它将通过 ajax 拉取 body)) 并将其附加到当前页面的 DOM，问题是它只会拉取 JQM 页面(或body 如果没有)并忽略它之外的所有内容(除了标题)，这意味着您的 JavaScript 不会被调用。

当您刷新页面时，将进行正常的 HTTP 调用并加载整个页面，以便执行您的代码。

为了让您的 JavaScript 被调用，您需要在您的第一个页面上有相关的脚本，或者您可以将它与您的 JQM 页面包装器一起使用，然后它会被一起拉出。

 <div data-role="page" id="photos" data-theme="a"
      data-add-back-btn="true" data-back-btn-text="Back">
  ....
 <script type='text/javascript' src='javascript/createAlbums3.js'></script>
 </div><!-- /page -->

看看 following Q&A从官方文档获取更多详细信息。

关于通过 listview，jquery mobile 导航时，Javascript 不运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18203750/

24 4 0
文章推荐： javascript - 像在 Google 通讯录中一样创建国家代码下拉列表
文章推荐： c - 使用目标MAC的ARP数据包
文章推荐： c - 从带有指针的函数返回更大类型的日期
文章推荐： javascript - 在 Mapbox 中重置我所有的 markerLayer
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com