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

Question

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

经过一番尝试后，我意识到，如果我从上一页(重定向到当前页面)中删除 jquery.mobile-1.4.3.min.js 库，那么脚本正在按预期运行。

任何人都可以帮忙解释为什么会发生这种情况以及如何解决它吗？

更新:打开 hpme 页面(其中包含指向包含 JS 的页面的链接)时，我可以在控制台中看到以下错误:未捕获的类型错误:无法设置未定义的属性“mobile”。

请注意，此主页基本上是带有库声明和 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>