PhoneGap 和 jQuery Mobile：脚本不加载答案

【问题标题】：PhoneGap & jQuery Mobile: Script does not loadPhoneGap 和 jQuery Mobile：脚本不加载
【发布时间】：2013-02-20 18:48:59
【问题描述】：

我整天都在解决以下问题。我试图让 PhoneGap 和 jQuery-mobile 运行。该应用程序启动，但是，如果我提交表单，他会再次加载同一个站点，忽略 form.js 中的所有内容（参见下面的 html 代码）。我有这个 html 代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jQuery/jquery-migrate-1.0.0.js"></script>
    <script type="text/javascript" src="cordova-2.4.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
    <script type="text/javascript" src="js/jQuery.mobile/jquery.mobile-1.2.0.min.js"></script>
    <title>SecureBook</title>
</head>
<body onload="app.initialize();">
    <div data-role="page">
        <div data-role="header">
            <h1>Welcome</h1>
        </div>
        <div data-role="content">
            <form id="userdata">
                <input type="text" id="username" placeholder="Username"  autofocus>
                <input type="password" id="password" placeholder="Passoword">
                <input type="submit" value="Anmelden" data-icon="forward" data-theme="b">
            </form>
        </div>
        <script>
            gotLoaded();
            console.log("in HTML");
        </script>
    </div>
</body>

他似乎没有加载 form.js，因为他没有调用函数 gotLoaded() 也没有调用 console.logging 任何东西。 form.js 看起来是这样的：

function gotLoaded(){
console.log("loaded form");
};
$('#userdata').submit(function(event){
    console.log("transmitted form");
    event.preventDefault();
    var user = $('#username').val();
    var password = $('#password').val();
    $.mobile.changePage("sites/contacts.html",{
        transition: "none"
    });
});

然而，他确实从 js 文件夹中加载了所有其他脚本，但没有执行 form.js 中的任何内容。至少不是在我的 Android 手机上，在浏览器中，他向我展示了我记录的内容。我希望你能帮助我。非常感谢， Stiller_leser

附：刚刚看到他也没有记录（“传输形式”）。

【问题讨论】：

如果你没问题的话，把你的代码压缩并发送到ma email，我会帮你解决的。
感谢您的提议，对我有用，如下所示。不是一个好的解决方案，但它有效。不过，欢迎回答“为什么”。

标签： cordova jquery-mobile

【解决方案1】：

您可以尝试在头部的 pageshow 处理程序 (http://jquerymobile.com/demos/1.0rc3/docs/api/events.html) 中添加提交事件处理程序，但您还需要为您的页面提供一个 id。

<script>
    $('#pageID').live("pageshow", function() {
        $('#userdata').submit(function(event){
            console.log("transmitted form");
            event.preventDefault();
            var user = $('#username').val();
            var password = $('#password').val();
            $.mobile.changePage("sites/contacts.html",{
                transition: "none"
            });
        });
    })
 </script>

【讨论】：

【解决方案2】：

对我有用，如下所示。不知道为什么。似乎在最后添加我的表单脚本可以确保加载所有 jQuery-Stuff。这是最终代码。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />

    <script type="text/javascript" src="cordova-2.4.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jQuery/jquery-migrate-1.0.0.js"></script>  
    <script type="text/javascript" src="js/jQuery.mobile/jquery.mobile-1.2.0.min.js"></script>       
    <title>SecureBook</title>
</head>
<body onload="app.initialize();">
    <div data-role="page">
        <div data-role="header">
            <h1>Welcome</h1>
        </div>
        <div data-role="content">
            <form id="userdata" onsubmit="gotLoaded();">
                <input type="text" id="username" placeholder="Username"  autofocus>
                <input type="password" id="password" placeholder="Passoword">
                <input type="submit" value="Anmelden" data-icon="forward" data-theme="b">
            </form>
        </div>
        <script>
            //WORKS
            console.log("in HTML");
            //JQUERY works here
            console.log($('title').html());
        </script>
    </div>

<!-- Put customs scripts here as it seems, that jQuery loads to slow in the head and scripts already run -->
<script type="text/javascript" src="js/form.js"></script>
</body>

【讨论】：