Форма Кордовы не подает или кнопки не работают (андроид +4.4)

ПРИМЕЧАНИЕ. Следующая проблема возникает только в версиях Android выше 4.4.2 (насколько я знаю)


TL; DR

  • Проблема 1: Кнопки с нажатием кнопки / tap / vclick / touchstart, которые, как представляется, работают только частично (10-30% времени) в моем приложении cordova (только для Android).
  • Проблема 2: кнопка в моей форме (кнопка отправки) не вызывает мой .submit(function(){..}); Событие, но кнопка «go / enter» на клавиатуре вызывает событие. (Только для Android)

Я пытаюсь разработать гибридное приложение для ios / android / windows. В приложении у меня будет случайная кнопка, которая должна вызвать некоторые действия.

Проблема 1
Обычно я бы использовал .on('click', function() { ... }); , Но я узнал, что этот клик действительно не работает с мобильными устройствами. Вместо этого я либо буду использовать vclick , tap или touchstart , но это не всегда работает. Иногда кнопка запускается, иногда она срабатывает после того, как я снова нажимаю / нажимаю.

Проблема 2
На других страницах у меня будет форма, заключенная в <form> и включающая <button type="submit" id="btnSubmit">Submit form</button> . В моем javascript у меня будет .on('submit', function(e){ ... }); Событие, чтобы поймать форму submit, но по другой необъяснимой причине это не работает.

Вот моя форма:

 <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."); }); 

Когда я нажимаю кнопку «Отправить», как вы можете видеть на изображении, форма отправляет и просматривает код выше. Однако, когда я нажимаю кнопку «Регистрировать», ничего не произойдет.
Введите описание изображения здесь

Теперь я знаю, что вы, ребята, скажете, просто добавьте событие onclick к кнопке и поймайте форму submit, но тогда я просто застряю с моей первой проблемой. Кнопка не всегда срабатывает.


Обновить

В соответствии с запросом, вот как выглядят мои страницы 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> 

На кнопке regRegister введите действие onclick = "yourFunction ()"

И читайте это: Как добавить функцию на кнопку в телефонной запинке?

Кнопка regRegister имеет кнопку type=button , а не type=submit , однако я не уверен, что это проблема. У меня были аналогичные проблемы с нажатием не работает в приложении Ionic / Cordova, и проблема заключалась в том, что система крана Ionic мешала некоторым картам, которые я загружал (OpenLayers). В ионике это решение.

Возможно, одна из загружаемых вами библиотек мешает jQuery Mobile.

Я решил проблему, поскольку это была проблема HTML. В верхней части моего HTML был div, который охватывал весь экран. У этого div был display: none стиль не был прикреплен к нему, что сделало невозможным щелкнуть по нему. Удалив это, я смог снова щелкнуть каждую кнопку.