9

我正在构建一个使用 Cordova/PhoneGap 和 JQuery Mobile 的应用程序。

我想在应用程序中使用 JQuery，但我无法让它工作——即使使用简单的代码也没有任何反应。

我相信我的标题设置正确：

<script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript" src="js/jquery.min.1.9.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="js/myscripts.js"></script>
        <script type="text/javascript">
            app.initialize();
            </script>

当我得到 JQuery Mobile 样式的标题和后退按钮等时。

但是当我尝试一些简单的事情时：

document.addEventListener("deviceready", function(){
    $('p').append("<strong>HEllO</strong>");
});

在myscripts.js文件中我什么也没得到。我需要以不同的方式触发 JQuery 吗？谁能指出我正确的方向？

编辑：

我发现这个提到将它放在 div 中。这实际上对我有用，例如

 <div class="normal" data-role="page" data-title="Program">
          <script type="text/javascript">
          $(".normal").on('pageinit', function() {

          $('p').append("<strong>HEllO</strong>");
          });
          </script>

但肯定有更好的方法吗？必须有一种方法可以将这些脚本全部放在自己的外部文件中吗？

PS：我的 HTML 是：

<body>
      <div data-role="page" data-title="Program">
          <div id="programholder">
              <div data-role="header">
                  <a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
                  <h1>HEADER</h1>
              </div><!--HEADER-->
              <div data-role="content">
                  <p>
                  Append here
                  </p>
             </div><!--CONTENT-->
          </div><!--HOLDER-->    
      </div><!--PAGE-->
    </body>
4

1 回答 1

13

要理解一个问题，您必须了解 jQuery Mobile 的工作原理。它使用 ajax 来加载其他页面。

第一页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。当第二个页面被加载时，只有它的 BODY 内容被加载到 DOM 中。

因此，如果您想为每个页面分离 js 文件，则需要从 BODY 初始化它们，因为 HEAD 将被丢弃。

像这样：

<body>
    <script>
        // Your javascript will go here
    </script>
    // And rest of your HTML content
</body>

您的 LINK 和 STYLE 标签也是如此。

如果您想了解更多信息，请阅读我的另一篇文章，其中包含有关此主题的示例：为什么我必须将所有脚本放入 jquery mobile 中的 index.html

另一件事是，在使用 jQuery Mobile 时，永远不要使用这种初始化：

document.addEventListener("deviceready", function(){
    $('p').append("<strong>HEllO</strong>");
});

你也不应该使用准备好的经典 jQuery 文档。它们中的 Bot 通常会在页面成功加载到 DOM 之前触发。这就是为什么 jQuery Mobile 有页面事件。而且您使用 pageinit 事件是正确的，但是您以错误的方式进行了操作。jQuery Mobile 页面事件应该像这样绑定：

$(document).on('pageinit', ".normal",function() {
      $('p').append("<strong>HEllO</strong>");
});

如果您想了解更多信息，请阅读我关于文档就绪与页面事件差异的其他答案：jQuery Mobile：文档就绪与页面事件

于 2013-05-15T07:20:09.640 回答