Question

我有一个使用jQuery mobile和Phonegap / Cordova构建的多HTML应用程序。我理解单页HTML是首选，但它只是不能使用我当前的设置（我必须使用CMS来制作内容，这将是单独的HTML）。

index.html上的一切正常。我可以使用通常的<a href="child.html"></a>从index.html导航到child.html，并且页面已加载，一切看起来都很好（加载了CSS），但我的javascript都没有在child.html中执行。使用jquery移动API的标签，下拉列表等不再有效。

这是我的 index.html 文件的结构，其中包含对JS和CSS文件的调用。

<!DOCTYPE html>
<html>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
  <script type="text/javascript" src="scripts.js"></script>
  <script src="cordova.js"></script>
  <link rel="stylesheet" href="styles.css" type="text/css">
<body>
<div data-role="page">
    <div data-role="panel" id="mypanel" data-position="left" data-display="push">[nav code here]</div>
    <div data-role="header">[header code here]</div>
    <div data-role="main">
      [main content code here]
      <a href="child.html">link to child page</a>
    </div>
    <div data-role="footer">[footer code here]</div>
</div>
</body>
</html>

然后，我的 child.html 页面中的内容从索引页面链接

<div data-role="page">
    <div data-role="panel" id="mypanel" data-position="left" data-display="push">[nav code here]</div>
    <div data-role="header">[header code here]</div>
    <div data-role="main">[main content code here]</div>
    <div data-role="footer">[footer code here]</div>
</div>

Answer 1

想出来。事实证明，我们不能将document.ready用于JQM。所以我使用$(document).on('pageinit', function() {});并且它加载得很好，但我需要对jquerymobile标签进行一些微调。

有关发生这种情况的更详细说明，请参阅此链接：jQuery Mobile: document ready vs page events

jquery mobile - JS不在多HTML应用程序的第二页上执行

1 个答案: