提示消息不显示在jquery移动应用程序中
问题描述:
我是jquery和jquery mobile的新手。我目前正在尝试创建一个简单的移动应用程序,一旦加载页面,就会显示一条警告消息。 我在HTML文件的头部有加,作为建议,下面的代码:提示消息不显示在jquery移动应用程序中
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
在主体部分我已经加入,如预期,图表网页代码:
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
<a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
但是,当图表页面加载到我的计算机(不是电话)的浏览器中时,不会显示任何提示消息。有谁知道问题可能在哪里?提前致谢!
答
这里是完整的HTML和代码,我可以在我的所有浏览器(IE浏览器,铬,火狐)成功警报。我想你的一些JavaScript不存在或错字。尝试使用CDN。
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$('#chart').live('pageinit',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
<a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
</body>
</html>
更新:
如果您正在使用jQuery 1.9+,我们应该使用的.live。上。这是因为.live已从1.9中删除。 http://api.jquery.com/live/ 所以,代码应该,如果你使用的是1.9
$(document).on('pageinit','#chart', function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
答
我认为,jQuery Mobile页面事件(如pageInit)不会在页面外面冒泡。尝试插入脚本标签页DIV中这样
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
<a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
</div>
或者您可以在pageInit功能绑定到文档元素是这样的:
$(document).live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
但我认为第一个解决方案是更加内嵌与最佳做法
完成,但没有任何显示,谢谢 – Anto 2013-02-26 15:32:06
如何复制我的代码并在浏览器中运行? – Derek 2013-02-26 15:34:26
Derek,我使用的是1.9.1版本(jquery-1.9.1.min.js),这似乎是问题所在:1.8.2版本出现警告,1.9.1不做任何事情。你能证实吗? – Anto 2013-02-26 15:57:56