在Phonegap项目中使用正常的JQuery（使用JQuery Mobile）

我正在构建一个使用Cordova/PhoneGap和JQuery Mobile的应用程序。在Phonegap项目中使用正常的JQuery（使用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 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>

来源

2013-05-15 MeltingDog

要了解你必须了解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>

同样的事情会为你的链接和风格标签。

如果您想了解更多的阅读我的关于这个话题的例子的另一篇文章：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文档。它们的Bot通常会在页面成功加载到DOM之前触发。这就是为什么jQuery Mobile有页面evenets。你使用pageinit事件是正确的，但你做错了。jQuery Mobile的页面事件的应绑定这样的：

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

如果您想了解更多阅读我的关于文件准备VS页面事件区别其他答案：jQuery Mobile: document ready vs page events

来源

2013-05-15 07:20:09 Gajotres

啊！这就说得通了。那么我是否正确地猜测，如果我把所有外部脚本的链接放在索引页面的标题中都会很好？ – MeltingDog

从实践和美学的角度来看，你是对的，这是最好的方法。 – Gajotres

在Phonegap项目中使用正常的JQuery（使用JQuery Mobile）

回答

相关问题