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

【问题标题】：$.mobile is undefined (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 Worklight版本。

【问题讨论】：

因为jquery和jquery mobile都应该放在<head>中，jquery应该在jquery mobile之前加载
它让我的应用变成了纯html页面..
好吧，至少先加载 jquery。

标签： jquery-mobile ibm-mobilefirst

【解决方案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");

【讨论】：

注意：如果使用较新版本的 Worklight，则不需要这样做。

【解决方案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 控制台预览

工作... 我建议您像上面那样从小处着手（包括使用最新版本的 Worklight 和 jQuery Mobile），并在这个（工作）基础上进行构建。

您可以从 Eclipse Marketplace 获得最新版本的 Worklight（在 Eclipse 中，查看帮助菜单 >> Marketplace）。

【讨论】：

好的。所以我删除了jquery 行并将jquery.mobile 移动到head 并在正文底部留下initOption.js、Home.js 和message.js，但我的应用程序变成了一个普通的html 页面。
更新您问题中的代码 sn-ps 并使用更改后的样子。
嗨 Idan，抱歉回复晚了，我昨天很忙。我已经尝试使用您的代码，但仍然没有运气:( 请查看我编辑的代码和底部的 1 行。我无法使用最新版本，因为控制台中会出现一些错误，我还需要包含 jquery .min.js 以防止任何未定义的错误。
5.0.2 是一个非常旧的版本，我上面的标记不适用于该版本。需要考虑一下。为什么控制台不适用于 5.0.6？请解释一下。
哦，是不是很旧的版本？我不知道，因为我对 Worklight 很陌生，并且是从我的主管那里得到的。使用您的代码，jquery-mobile 中存在语法错误。我认为最好先更新 Worklight 版本。我今晚会更新它，因为代理在我的办公室里阻止了它。