Question

我正在构建一个使用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？有人能指出我正确的方向吗？

修改：

我发现this提到将它放在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>

Answer 1

要了解问题，您必须了解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标签也是如此。

如果您想了解更多内容，请阅读我的其他文章，其中包含有关此主题的示例： Why I have to put all the script to index.html in jquery mobile

另外，在使用jQuery Mobile时，永远不要使用这种初始化：

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

你也不应该使用经典的jQuery文档。在将页面成功加载到DOM之前，它们通常会触发。这就是jQuery Mobile拥有页面evenets的原因。你使用pageinit事件是正确的，但你做错了。 jQuery Mobile页面事件应该像这样绑定：

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

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

在Phonegap项目中使用普通的JQuery（使用JQuery Mobile）

1 个答案: