JQM - 页面上的 data-dom-cache="true" 未加载 js 文件

Posted

技术标签:

【中文标题】JQM - 页面上的 data-dom-cache="true" 未加载 js 文件【英文标题】:JQM - data-dom-cache="true" on page not loading js files 【发布时间】:2014-10-01 19:25:58 【问题描述】:

我从 JQM 页面得到了一种奇怪的行为。

我在 Eclipse IDE 中使用 phonegap-android 4.4.2。

页面代码:

    <html>
        <head></head>
        <body>
            <div data-role="page" id="folfirstForm" data-dom-cache="true">
            <link rel="stylesheet"  href="../../css/follow_up.css">
            <script src="../../js/addProdLine.js"></script>
            <script type="text/javascript">
                $(document).off("pageshow", "#folfirstForm").on("pageshow", "#folfirstForm", function() 
                    alert("First form loaded!"); 

                    AddElement();
                );
            </script>
            ----Some body----
        </body>
</div>
  </div>
    </html>

您可以看到我根据我的要求放置data-dom-cache="true" 的代码。我还包含了名为 addProdLine.js 的 js 文件,其中包含我需要的函数(例如,AddElement() 来自它自己的包含文件)。

现在,当我第一次访问此页面时,所有功能都运行良好。在同一页面的第二次访问中,我得到了之前的表单状态,正如我所输入的 data-dom-cache="true" 所预期的那样。但可能是由于data-dom-cache="true" 我的外部 js 文件在第二次访问同一页面时没有加载。我希望,每次访问时,我的 js 文件都应该运行。

【问题讨论】:

【参考方案1】:

Jquery mobile 仅在加载整个文档时加载一次标记。加载文档后,如果您单击其他链接,则只有内容部分data-role=page将通过ajax刷新以及数据转换效果。因此,要么将所有 js 脚本添加到文件中并将其添加到 head 标签中,要么使用以下选项停止通过 ajax 加载其他页面:

<a href="#" data-ajax=”false”>Without Ajax</a>

但是如果您将使用 ajax 禁用内容加载,则链接将像在正常网页中一样工作,并且过渡效果将不存在。

编辑:

另一种方法可能是:您可以将一些随机值附加到 JS 文件的路径中。

<script src="../../js/addProdLine.js?Q=<?php echo time(); ?>"></script>

【讨论】:

好的,在答案中尝试其他方式。如果您不使用 php,那么您可以使用任何方法在您的脚本语言中生成随机数。

以上是关于JQM - 页面上的 data-dom-cache="true" 未加载 js 文件的主要内容,如果未能解决你的问题,请参考以下文章

jqm listview上的onclick事件不起作用?

在 Android 上使用 JQM 和 PhoneGap 闪烁/闪烁

Jquery Mobile 滑块不工作 JQM 1.3.2 和 Jquery 1.10.2

Android 上的 jQM + WL - 横向 CPU 高

JQM中如何通过滑动来滑动不同的页面?

是否无法为 $(document) 上的 jqueryui/jqm 小部件事件设置 on() 侦听器?