La forma de Córdoba no se envía o los botones no funcionan (android +4.4)

NOTA: El siguiente problema sólo se produce en versiones de Android por encima de 4.4.2 (por lo que sé)


TL, DR

  • Problema 1: Los botones con click / tap / vclick / touchstart adjuntos a ellos, parecen funcionar sólo parcialmente (10-30% del tiempo) en mi aplicación cordova (sólo para Android).
  • Problema 2: El botón de mi formulario (botón de envío) no .submit(function(){..}); mi .submit(function(){..}); Evento, pero el botón 'ir / entrar' en el teclado desencadena el evento. (También Android solamente)


Estoy tratando de desarrollar una aplicación híbrida para ios / android / windows. En la aplicación, tendré el botón ocasional que necesita para activar algunas acciones.

Problema 1
En general, utilizaría .on('click', function() { ... }); , Pero he aprendido que el clic realmente no coopera con dispositivos móviles. En su lugar, o bien utilizar vclick , tap o touchstart , sin embargo, esto no siempre parece funcionar. A veces el botón se activará, a veces se disparará después de que repetidamente toque / haga clic en él.

Problema 2
En otras páginas tendré un formulario que está envuelto en una etiqueta <form> e incluye un <button type="submit" id="btnSubmit">Submit form</button> . En mi javascript tendré un .on('submit', function(e){ ... }); Evento para capturar el formulario de presentar, pero por otra razón inexplicable, esto no parece funcionar.

Aquí está mi forma:

 <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> 

Y este debe ser el código para obtener mi forma desencadenada:

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

Cuando presiono el botón de envío como se puede ver en la imagen, el formulario se enviará y pasar por el código anterior. Sin embargo, cuando presiono el botón "Registreren", no sucederá nada.
Introduzca aquí la descripción de la imagen

Ahora sé que ustedes dirán, sólo agrega un evento onclick al botón y captura el formulario de enviar así, pero luego voy a estar atascado con mi primer problema. El botón no siempre parece ser activado.


Actualizar

Según lo solicitado, aquí es cómo mi index.html páginas parece ver una descripción de mis scripts adicionales:

 <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> 

3 Solutions collect form web for “La forma de Córdoba no se envía o los botones no funcionan (android +4.4)”

En el botón regRegister poner acción onclick = "yourFunction ()"

Y lee esto: ¿Cómo agregar la función en el botón en phonegap?

El botón regRegister tiene type=button , no type=submit , sin embargo no estoy seguro de que este es el problema. Tuve problemas similares con tap no funcionaba en una aplicación de Ionic / Cordova y el problema era que el sistema de grifo de Ionic estaba interfiriendo con algunos mapas que estaba cargando (OpenLayers). En Ionic la solución es ésta .

Tal vez una de las bibliotecas que está cargando interfiere con jQuery Mobile.

Resolví el problema, ya que era un problema de HTML. En la parte superior de mi HTML había una div que cubría toda la pantalla. Esta div tenía una display: none estilo adjunto a lo que hizo imposible para mí hacer clic en él. Al eliminar esto, pude hacer clic en cada botón de nuevo.

  • Cómo ocultar unhide webview en android
  • Webview no muestra la fuente Gujarati
  • ¿Hay alguna manera de hacer que una vista web que ejecuta android 4.0 se realice a un nivel aceptable?
  • Las imágenes se cargan más rápido en la vista web
  • WebView con vídeo incorporado reproduce en segundo plano
  • El bloqueo del sistema al reemplazar shouldInterceptRequest en WebViewClient
  • android webview muestra youtube.com/tv video en pantalla completa
  • cómo leer el archivo .webarchive en android
  • Androide WebView alternativa para webapps
  • WebView en Galería deteniendo eventos de desplazamiento / toque
  • Cómo ver la transmisión de vídeo RTSP a través de WebView en la aplicación para Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.