Question

我有主要的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 Worklight版本。

Answer 1

最后我通过以下方式解决了这个问题：

<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");

Answer 2

Worklight已与jQuery捆绑在一起，因此您不应该像在HTML底部那样第二次添加它。此外，你不应该把它放在底部，而不是在HEAD中 - 删除那一行。

此外，还可以将对jQuery Mobile的引用移动到HEAD a。

使用Worklight 5.0.6.1（您似乎没有使用的最新版本）和jQuery Mobile 1.3.1，我创建了一个新项目和应用程序，并按如下方式修改了HTML：

<!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元素中引用它们。
我在BODY元素中添加了。
构建全部和部署
通过Worklight Console预览

...作品我建议你从上面开始做小事（包括使用Worklight和jQuery Mobile的最新版本），然后建立在（工作）基础之上。

您可以从Eclipse Marketplace获取最新版本的Worklight（在Eclipse中，查看“帮助”菜单＆gt;＆gt;市场）。

$ .mobile未定义（Worklight + jQuery Mobile）

2 个答案: