Cordova form没有';t提交或按钮不工作(android+;4.4)
注意:以下问题仅出现在4.4.2以上的Android版本上(据我所知)Cordova form没有';t提交或按钮不工作(android+;4.4),android,cordova,jquery-mobile,webview,Android,Cordova,Jquery Mobile,Webview,注意:以下问题仅出现在4.4.2以上的Android版本上(据我所知) TL;DR 问题1:在我的cordova应用程序(仅限Android)中,带有click/tap/vclick/touchstart的按钮似乎只能部分工作(10-30%的时间) 问题2:我表单中的按钮(提交按钮)不会触发我的.submit(function(){..})事件,但键盘上的“go/enter”按钮确实会触发事件。(也仅限Android) 我正在尝试为ios/android/windows开发一个混合应用程
TL;DR
- 问题1:在我的cordova应用程序(仅限Android)中,带有click/tap/vclick/touchstart的按钮似乎只能部分工作(10-30%的时间)
- 问题2:我表单中的按钮(提交按钮)不会触发我的
.submit(function(){..})代码>事件,但键盘上的“go/enter”按钮确实会触发事件。(也仅限Android)
我正在尝试为ios/android/windows开发一个混合应用程序。在应用程序中,我会有一个偶尔的按钮,需要触发一些动作 问题1
通常我会使用
.on('click',function(){…})
,但我了解到click并不真正与移动设备配合。相反,我会使用vclick
,点击
或触摸启动
,但这似乎并不总是有效。有时按钮会触发,有时在我反复点击/点击后会触发
问题2在其他页面上,我将有一个包装在
标签中的表单,其中包括一个提交表单。在我的javascript中,我将有一个.on('submit',函数(e){…})代码>事件捕获表单提交,但由于另一个无法解释的原因,这似乎不起作用
这是我的表格:
<form id="registerForm" method="post" action="#" class="ui-body ui-body-b ui-corner-all">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regLang" data-translation="reg_language"></label>
<select id="regLang" name="Language">
<!--<option value="0">EN</option>-->
<option value="1">NL</option>
<option value="2">FR</option>
<!--<option value="3">DE</option>-->
</select>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regCode">Registration Code:</label>
<input type="text" name="RegistrationCode" placeholder="Registration Code" data-translation="reg_code" id="regCode" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="regEmail">E-Mail Address:</label>
<input type="email" name="EmailAddress" placeholder="Email Address" data-translation="reg_email" id="regEmail" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<!--<label for="regPassword">Password:</label>-->
<input type="password" name="Password" placeholder="Password" data-translation="reg_password" id="regPassword" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<button type="button" id="regRegister">
<span data-translation="reg_register"></span>
</button>
</div>
</form>
当我按下提交按钮时,正如你在图片上看到的那样,表单将提交并浏览上面的代码。然而,当我按下“注册表人”按钮时,什么也不会发生
现在我知道你们会说,只需在按钮上添加一个onclick事件,然后像那样捕获表单提交,但接下来我将遇到我的第一个问题。按钮似乎并不总是被触发
更新
根据要求,以下是我的index.html页面的外观,以查看我的其他脚本的概述:
<head>
<meta charset="UTF-8" />
<title>Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- JQuery -->
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" type="text/css" />
<!-- simple dialog -->
<link rel="Stylesheet" href="jquery-mobile/jquery.mobile.simpledialog.min.css" type="text/css" />
<link href="styles/main_absolute.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
<link href="styles/app.css" rel="stylesheet" type="text/css" />
<link href="jquery-mobile/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script>
// Prevent default errors at start of application when running in browser.
// However, still shows other exceptions that are needed to debug the application.
// NOTE: comment this code if you're building the ios or android app (or windows)
// (function () {
// var ConsoleBasedNativeApi = {
// exec: function(bridgeSecret, service, action, callbackId, argsJson) {
// return console.log(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
// },
// setNativeToJsBridgeMode: function(bridgeSecret, value) {
// console.log(value, 'gap_bridge_mode:' + bridgeSecret);
// },
// retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
// return console.log(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
// }
// };
// window._cordovaNative = ConsoleBasedNativeApi;
// })();
</script>
<script src="cordova.js" type="text/javascript"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<!-- <script src="js/lib/jquery-mobile/jquery.mobile-1.4.2.js" type="text/javascript"></script> -->
<script src="js/lib/jquery-mobile/jquery-drag/jquery.event.drag-2.2.js" type="text/javascript"></script>
<!-- jquery progress bar -->
<link href="styles/jqm-progress-bar/jQMProgressBar.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery-mobile/jquery.mobile.simpledialog2.min.js" type="text/javascript"></script>
<!--simple dialog-->
<script src="js/lib/jqm-progress-bar/jQMProgressBar.js" type="text/javascript"></script>
<!-- Slickgrid -->
<link href="slickgrid/slick.grid.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/controls/slick.pager.css" rel="stylesheet" type="text/css" />
<script src="slickgrid/slick.core.js" type="text/javascript"></script>
<script src="slickgrid/slick.grid.js" type="text/javascript"></script>
<script src="slickgrid/slick.dataview.js" type="text/javascript"></script>
<script src="slickgrid/controls/slick.pager.js" type="text/javascript"></script>
<!-- toastr -->
<link href="js/lib/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="js/lib/toastr/toastr.min.js" type="text/javascript"></script>
<!-- moment -->
<script src="js/lib/moment.min.js" type="text/javascript"></script>
<!-- Underscore -->
<script src="js/lib/underscore.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-plugins/data-selector.js" type="text/javascript"></script>
<!-- statusbar -->
<script src="js/lib/statusbar.js" type="text/javascript"></script>
<!-- Own libs -->
<script src="js/app/namespace.js" type="text/javascript"></script>
<script src="js/app/translation.js" type="text/javascript"></script>
<script src="js/app/toast.js" type="text/javascript"></script>
<script src="js/app/config.js" type="text/javascript"></script>
<script src="js/app/settings.js" type="text/javascript"></script>
<script src="js/app/utils.js" type="text/javascript"></script>
<script src="js/app/database.js" type="text/javascript"></script>
<script src="js/app/grid.js" type="text/javascript"></script>
<script src="js/app/sidebar.js" type="text/javascript"></script>
<script src="js/app/logo.js" type="text/javascript"></script>
<script src="js/app/news.js" type="text/javascript"></script>
<script src="js/app/registration.js" type="text/javascript"></script>
<script src="js/app/sync.js" type="text/javascript"></script>
<script src="js/app/login.js" type="text/javascript"></script>
<script src="js/app/cart.js" type="text/javascript"></script>
<script src="js/app/productdetail.js" type="text/javascript"></script>
<script src="js/app/customer.js" type="text/javascript"></script>
<script src="js/app/recipe.js" type="text/javascript"></script>
<script src="js/app/endlessgrid.js" type="text/javascript"></script>
<script src="js/app/visitreports.js" type="text/javascript"></script>
<script src="js/app/reports.js" type="text/javascript"></script>
<script src="js/app/progresshandler.js" type="text/javascript"></script>
<script src="js/app/departments.js" type="text/javascript"></script>
<!-- iScroll -->
<script src="js/lib/iscroll/iscroll.js" type="text/javascript"></script>
<script src="js/lib/iscroll/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<link href="js/lib/iscroll/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
<link href="js/lib/iscroll/jquery.mobile.iscrollview-pull.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="js/app/app.js" type="text/javascript"></script>
<!-- Debugger -->
<!--<script src="http://192.168.100.199:8080/target/target-script-min.js#anonymous"></script>-->
<!--<script src="http://192.168.16.125:8080/target/target-script-min.js#anonymous"></script>-->
<!-- <script src="http://debug.phonegap.com/target/target-script-min.js#bee0a570-a515-11e3-8d7c-22000a98b3d6"></script> -->
</head>
<body>
Content is probably not relevant and also way too long
</body>
应用
//在浏览器中运行时,防止应用程序启动时出现默认错误。
//但是,仍然显示调试应用程序所需的其他异常。
//注意:如果您正在构建ios或android应用程序(或windows),请注释此代码
//(功能(){
//变量ConsoleBasedNativeApi={
//exec:函数(bridgeSecret、服务、操作、回调ID、argsJson){
//返回console.log(argsJson,'gap:'+JSON.stringify([bridgeSecret,service,action,callbackId]);
// },
//setNativeToJsBridgeMode:函数(bridgeSecret,值){
//log(值“gap\u bridge\u mode:”+bridgeSecret);
// },
//retrieveJsMessages:函数(bridgeSecret,fromOnlineEvent){
//返回console.log(+fromOnlineEvent,'gap_poll:'+bridgeSecret);
// }
// };
//窗口。_cordovanive=ConsoleBasedNativeApi;
// })();
$(document).bind(“mobileinit”,function(){
$.mobile.hashListengEnabled=false;
});
内容可能不相关,而且太长
重新注册按钮有type=button
,而不是type=submit
,但是我不确定这是问题所在。我在Ionic/Cordova应用程序中遇到了与tap不工作类似的问题,问题是Ionic的tap系统干扰了我正在加载的一些地图(OpenLayers)。在离子液体中,溶液是
可能您正在加载的某个库干扰了jQuery Mobile。按钮上的“重新注册放置操作”
onclick=“yourFunction()”
阅读以下内容:我解决了这个问题,因为它是一个HTML问题。在我的HTML上面有一个div,它覆盖了整个屏幕。这个div附带了一个显示:none
样式,这使得我无法点击它。通过删除此按钮,我可以再次单击每个按钮 您没有为表单提交定义任何表单操作吗?您是指我的表单操作中的“#”?我在javascipt中定义了我的操作。它将使用ajax调用与我的服务器代码进行通信。您是否使用chrome://inspect
?@t0mm13b是,反复按下按钮后,断点最终触发。但很少从第一次尝试开始。您是否使用其他脚本?你能给我们看看你的index.html吗?好的:)玩得开心!但是,请阅读如何在按钮上附加一个操作以调用函数:),以便将来编程:D
<head>
<meta charset="UTF-8" />
<title>Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- JQuery -->
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" type="text/css" />
<!-- simple dialog -->
<link rel="Stylesheet" href="jquery-mobile/jquery.mobile.simpledialog.min.css" type="text/css" />
<link href="styles/main_absolute.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
<link href="styles/app.css" rel="stylesheet" type="text/css" />
<link href="jquery-mobile/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script>
// Prevent default errors at start of application when running in browser.
// However, still shows other exceptions that are needed to debug the application.
// NOTE: comment this code if you're building the ios or android app (or windows)
// (function () {
// var ConsoleBasedNativeApi = {
// exec: function(bridgeSecret, service, action, callbackId, argsJson) {
// return console.log(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
// },
// setNativeToJsBridgeMode: function(bridgeSecret, value) {
// console.log(value, 'gap_bridge_mode:' + bridgeSecret);
// },
// retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
// return console.log(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
// }
// };
// window._cordovaNative = ConsoleBasedNativeApi;
// })();
</script>
<script src="cordova.js" type="text/javascript"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<!-- <script src="js/lib/jquery-mobile/jquery.mobile-1.4.2.js" type="text/javascript"></script> -->
<script src="js/lib/jquery-mobile/jquery-drag/jquery.event.drag-2.2.js" type="text/javascript"></script>
<!-- jquery progress bar -->
<link href="styles/jqm-progress-bar/jQMProgressBar.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery-mobile/jquery.mobile.simpledialog2.min.js" type="text/javascript"></script>
<!--simple dialog-->
<script src="js/lib/jqm-progress-bar/jQMProgressBar.js" type="text/javascript"></script>
<!-- Slickgrid -->
<link href="slickgrid/slick.grid.css" rel="stylesheet" type="text/css" />
<link href="slickgrid/controls/slick.pager.css" rel="stylesheet" type="text/css" />
<script src="slickgrid/slick.core.js" type="text/javascript"></script>
<script src="slickgrid/slick.grid.js" type="text/javascript"></script>
<script src="slickgrid/slick.dataview.js" type="text/javascript"></script>
<script src="slickgrid/controls/slick.pager.js" type="text/javascript"></script>
<!-- toastr -->
<link href="js/lib/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="js/lib/toastr/toastr.min.js" type="text/javascript"></script>
<!-- moment -->
<script src="js/lib/moment.min.js" type="text/javascript"></script>
<!-- Underscore -->
<script src="js/lib/underscore.min.js" type="text/javascript"></script>
<script src="js/lib/jquery-plugins/data-selector.js" type="text/javascript"></script>
<!-- statusbar -->
<script src="js/lib/statusbar.js" type="text/javascript"></script>
<!-- Own libs -->
<script src="js/app/namespace.js" type="text/javascript"></script>
<script src="js/app/translation.js" type="text/javascript"></script>
<script src="js/app/toast.js" type="text/javascript"></script>
<script src="js/app/config.js" type="text/javascript"></script>
<script src="js/app/settings.js" type="text/javascript"></script>
<script src="js/app/utils.js" type="text/javascript"></script>
<script src="js/app/database.js" type="text/javascript"></script>
<script src="js/app/grid.js" type="text/javascript"></script>
<script src="js/app/sidebar.js" type="text/javascript"></script>
<script src="js/app/logo.js" type="text/javascript"></script>
<script src="js/app/news.js" type="text/javascript"></script>
<script src="js/app/registration.js" type="text/javascript"></script>
<script src="js/app/sync.js" type="text/javascript"></script>
<script src="js/app/login.js" type="text/javascript"></script>
<script src="js/app/cart.js" type="text/javascript"></script>
<script src="js/app/productdetail.js" type="text/javascript"></script>
<script src="js/app/customer.js" type="text/javascript"></script>
<script src="js/app/recipe.js" type="text/javascript"></script>
<script src="js/app/endlessgrid.js" type="text/javascript"></script>
<script src="js/app/visitreports.js" type="text/javascript"></script>
<script src="js/app/reports.js" type="text/javascript"></script>
<script src="js/app/progresshandler.js" type="text/javascript"></script>
<script src="js/app/departments.js" type="text/javascript"></script>
<!-- iScroll -->
<script src="js/lib/iscroll/iscroll.js" type="text/javascript"></script>
<script src="js/lib/iscroll/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<link href="js/lib/iscroll/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
<link href="js/lib/iscroll/jquery.mobile.iscrollview-pull.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="js/app/app.js" type="text/javascript"></script>
<!-- Debugger -->
<!--<script src="http://192.168.100.199:8080/target/target-script-min.js#anonymous"></script>-->
<!--<script src="http://192.168.16.125:8080/target/target-script-min.js#anonymous"></script>-->
<!-- <script src="http://debug.phonegap.com/target/target-script-min.js#bee0a570-a515-11e3-8d7c-22000a98b3d6"></script> -->
</head>
<body>
Content is probably not relevant and also way too long
</body>