Question

我遇到一个非常奇怪的问题，我的javascript代码在第一次加载页面时没有运行。如果我重新加载/刷新页面，脚本运行正常。

经过一段时间的尝试后，我意识到如果我从上一页中删除 jquery.mobile-1.4.3.min.js 库（重定向到我当前的页面）然后脚本按预期运行。

有人可以帮忙解释为什么会这样，我该如何解决？

更新：在打开hpme页面（其中包含指向包含JS的页面的链接）时，我可以在控制台中看到以下错误：未捕获的TypeError：无法设置属性＆＃39; mobile＆＃39;未定义的。

请注意，这个主页基本上是一个带有库声明和html链接的简单代码。

编辑：我之前错过了jQuery lib，因此没有看到Uncaught TypeError。现在，我的库按以下顺序排列：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />

现在我的控制台中没有错误，但是下一页中的JS仍然没有在第一次加载中运行。奇怪的是，如果我删除 jquery.mobile-1.4.3.min.js 库，JS工作正常。

Answer 1

单页模型

jQuery Mobile通过Ajax加载外部页面;当你有一个指向另一个页面的链接时，jQM会在该页面中加载第一页div <div data-role="page">并忽略该div之外的其他标记。

如果您要在加载的页面中运行JS代码，则必须将其放在页面div中。

<div data-role="page">
   <!-- JS code -->
</div>

如果我包含jquery.mobile-1.4.3.min.js库，则JavaScript不会在首次加载时运行

1 个答案:

单页模型