Phonegap 3.3.0 + jquery onclick 不工作答案

【问题标题】：Phonegap 3.3.0 + jquery onclick not workingPhonegap 3.3.0 + jquery onclick 不工作
【发布时间】：2014-03-06 12:58:20
【问题描述】：

我在 Windows 8 平台上使用 phonegap 3.3.0.0.19.6。我通过 USB 连接了 Nexus 7 来测试我的应用。

我在使用 onclick 调用任何 javascript 代码时遇到问题。我试图显示一个简单的警报框，但它不起作用。然后我遵循了phonegap教程：

http://docs.phonegap.com/en/3.0.0/cordova_notification_notification.md.html

我在以下链接中发现了类似的问题。但是，这些帖子中的解决方案并不能回答我当前的 phonegap 问题。

How to fix onclick in Phonegap/Android especially in lower versions of Android?

Android/ Phonegap - onClick() not working

当我尝试在 chrome 中触发标准警报框时，一切正常。但是，当我部署到 Nexus 时，没有显示任何对话框。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-   scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
<title>Example Page</title>
<link rel="stylesheet" href="../www/css/themes/default/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="../www/css/themes/default/jqm-demos.css">
<link rel="shortcut icon" href="../www/favicon.ico">
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //wait for device api libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device apis are available
    function onDeviceReady() {
       // empty
    }
    function showAlert() {
      navigator.notification.alert(
       'Message box please display....', // message
       altertDismissed,             // no callback
       'Message Box Title',         // title
       'Continue'                   // button texr
    );
    }
 </script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
    <p><a href="#" data-inline="button" data-role="button" data-ajax="false" onclick="showAlert(); return false;">Show Alert</a></p>
</div><!-- /content -->

</div><!-- /page -->
</div><!-- /textWrapper -->
</body>
</html>

我已经使用plugman安装来安装插件

plugman install --platform android --project example --plugin org.apache.cordova.dialogs

nexus 运行的是 Android 4.4.2

目前我无法使用 onclick 触发任何 javascript 代码。

使用本机警报框或标准警报消息框的解决方案将回答我的问题。

提前致谢

【问题讨论】：

声明“altertDismissed”函数。现在试试。

标签： jquery-mobile cordova

【解决方案1】：

试试这个就行了

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf-  8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //wait for device api libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device apis are available
    function onDeviceReady() {
       // empty
    }
    function showAlert() {
      navigator.notification.alert(
       'Message box please display....', // message
       altertDismissed,             // no callback
       'Message Box Title',         // title
       'Continue'                   // button texr
    );
    }
    function  altertDismissed(){
       navigator.notification.alert("alert box is dismissed");
    }
 </script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
    <p><a href="#" data-inline="button" data-role="button" data-ajax="false" onclick="showAlert(); return false;">Show Alert</a></p>
</div><!-- /content -->

</div><!-- /page -->
</div><!-- /textWrapper -->
</body>


</html>

只需复制并替换它即可。

【讨论】：

很好发现的 Arvainth 我在引用 javascript 库时犯了一些错误。我已经复制了代码，并且在 nexus 上没有显示警告框。我已将 ShowAlert() 更改为简单的 alert('Hello World');连接上仍然没有警报框。在 chrome 中使用 serve 时，警报框显示正常。这是我的清单文件的权限问题吗？
我在我的 nexus 设备中测试它显示警报。显示任何错误？在堆栈跟踪中。
现在试试我为您引用的库编辑的这个。
Thankyou Arvainth - 让示例页面正常工作。你是对的，问题是由 javascript 引用引起的。我无法让内联 javascript 工作。我将代码更改为外部 javascript 文件并触发了 javascript。使用 chrome->device tools->inspect devices 下的 debugger 识别 js 函数未使用内联语法定义。
您可能希望绑定到 tap 或 touchstart 事件。它们在移动设备上的执行速度比 click 快得多