$.mobile未定义(Worklight + jQuery Mobile)
$.mobile未定义(Worklight + jQuery Mobile)
提问于 2013-05-16 02:04:22
我有主要的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
然后在Home.js中：
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});当我点击登录按钮时，它会在这一行中给出错误$.mobile is undefined：
$.mobile.changePage($('#nextPage.html'));有人能洞察我的代码出了什么问题吗？我相信我做了正确的事？此外，我使用5.0.2.407-developer-edition工作光版本。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-20 08:40:22
最后，我通过以下方式解决了这个问题：
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>稍后在js中：
jq.mobile.changePage("the.html");而不是
$.mobile.changePage("the.html");Stack Overflow用户
发布于 2013-05-16 03:10:53
Worklight已经与jQuery捆绑在一起，所以您不应该像在HTML底部那样第二次添加它。另外，你也不应该把它放在底部，而是在头部-删除这一行。
另外，将对jQuery移动的引用也移到头a。
使用Worklight 5.0.6.1 (您似乎没有使用的最新版本)和jQuery Mobile1.3.1，我创建了一个新的项目和应用程序，并对其进行了如下修改：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>- 我将缩小后的.css和.js文件放在文件夹中，并在HEAD元素中引用它们。
- 我把身体元素加进去了。
- 构建所有并部署
- 通过Worklight控制台预览
起作用..。我建议您从上面这样的小起点开始(包括使用最新版本的Worklight和jQuery Mobile)，并在此基础上进行构建。
您可以从获得最新版本的Worklight (在Eclipse中，查看帮助菜单>> Marketplace)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16577872
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号