Cordova 表单未提交或按钮不起作用 (android +4.4)

Question

注意：以下问题仅发生在 Android 4.4.2 以上的版本（据我所知）

TL;DR

问题 1:Buttons 附加了 click/tap/vclick/touchstart，在我的 cordova 应用程序（仅 Android）中似乎只能部分（10-30% 的时间）工作。
问题 2：我的表单中的按钮（提交按钮）没有触发我的 .submit(function(){..}); 事件，但是键盘上的 'go/enter' 按钮确实触发了该事件。（也仅 Android）

我正在尝试为 ios/android/windows 开发一个混合应用程序。在应用程序中，我偶尔会有需要触发某些操作的按钮。

问题 1
通常我会使用 .on('click', function() { ... });，但我了解到点击并不能真正与移动设备合作。相反，我将使用 vclick、tap 或 touchstart，但这似乎并不总是有效。有时按钮会触发，有时我重复tap/click它后会触发。

问题2
在其他页面上，我会有一个包含在 <form> 标记中并包含 <button type="submit" id="btnSubmit">Submit form</button> 的表单。在我的 javascript 中，我将有一个 .on('submit', function(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>

这应该是触发我的表单的代码：

$("#registerForm").submit(function (e) {
    console.log("I don't even make it inside.");
});

如图所示，当我按下提交按钮时，表单将提交并执行上面的代码。但是，当我按下 "Registreren" 按钮时，什么也不会发生。

现在我知道你们会说，只需向按钮添加一个 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>

Answer 1

regRegister 按钮有 type=button，而不是 type=submit，但我不确定这是问题所在。我在 Ionic / Cordova 应用程序中无法使用 tap 时遇到了类似的问题，问题是 Ionic 的 tap 系统干扰了我正在加载的某些地图 (OpenLayers)。在 Ionic 中，解决方案是 this one.

也许您正在加载的库之一会干扰 jQuery Mobile。

Answer 2

在按钮 regRegister 上放置动作 onclick="yourFunction()"

并阅读：How to add function on button in phonegap?

Answer 3

我解决了这个问题，因为它是一个 HTML 问题。在我的 HTML 之上有一个 div 覆盖了整个屏幕。这个 div 附有 display: none 样式，这让我无法点击它。通过删除它，我能够再次单击每个按钮。

Cordova 表单未提交或按钮不起作用 (android +4.4)

Cordova form doesn't submit or buttons are not working (android +4.4)

android

webview

jquery-mobile

cordova

更新