Mel*_*Dog 9 jquery jquery-mobile cordova jquery-mobile-ajax
我正在构建一个使用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>
Gaj*_*res 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文档.在将页面成功加载到DOM之前,它们通常会触发.这就是jQuery Mobile拥有页面evenets的原因.你使用pageinit事件是正确的,但你做错了.jQuery Mobile页面事件应该像这样绑定:
$(document).on('pageinit', ".normal",function() {
$('p').append("<strong>HEllO</strong>");
});
如果您想了解更多关于文档就绪与页面事件差异的其他答案:jQuery Mobile:文档就绪与页面事件
| 归档时间： |
|
| 查看次数： |
10852 次 |
| 最近记录： |