Question

我希望在按钮点击时显示警报窗口。我试图在浏览器中运行它。我也尝试在没有jQuery的情况下做到这一点 - 同样的问题。在我的HTML上，我只有一个按钮：

 <html>
<head>
    <title>Device Ready Example</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="js/index.js"></script>
    <button id="btn">BUTTON</button>
</head>
<body>
</body>
</html>

这是我的JavaScript文件（Chrome控制台中没有错误消息）：

function App() {
        var initialize = function () {
            onload();
        }

        onLoad = function () {
            document.addEventListener('deviceready', function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );
        }, false);
        }


        onDeviceReady = function () {
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("btn", onMenuKeyDown, false);
        }

        onPause = function () {
        }

        onResume = function () {
        }

        onMenukeyDown = function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );

        }
    };
    var app = new App;

Answer 1

您需要了解PhoneGap应用的工作原理。它们不是网站，因此它们的行为与您在浏览器中运行它们时的行为不同。 PhoneGap应用程序在webview中运行沙盒，它与Web浏览器共享许多功能，但有重要的区别。一个重要的区别是安全性，这会导致您遇到的问题。

您正在直接从Web链接jQuery库。当您在手机上运行应用程序时，webview将阻止该文件，因为出于安全原因，它会阻止访问任何外部网站。所以你得到的应用程序没有jQuery。

您必须将jQuery文件下载到本地文件夹并相应地更改链接。

与您的问题无关，我还建议首先加载cordova.js（在jQuery或任何其他脚本之前）。

Answer 2

问题在于你的index.js语法。如果你有一个JavaScript对象，你需要像这样实例化：

 function App() {
        var initialize = function () {
            onload();
        }
        onLoad = function () {
            document.addEventListener("deviceready", onDeviceReady, false);
        }


        onDeviceReady = function () {
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("btn", onMenuKeyDown, false);
        }

        onPause = function () {
        }

        onResume = function () {
        }

        onMenukeyDown = function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );

        }
    };
    var app = new App;

如果您在移动设备上运行应用程序，或者您可以添加浏览器cordova平台以使用这种方式，则deviceready eventlistener将起作用。

但问题的答案是，只需使用jquery。的index.html：

<html>
<head>
    <title>Device Ready Example</title>
    <button id="btn">BUTTON</button>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        document.addEventListener('deviceready', function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );
        }, false);
    </script>
</head>
<body>
</body>
</html>

如果JavaScript位于单独的文件中，Cordova应用程序不起作用

2 个答案: