Question

我有以下问题。

如果我将JavaScript代码放入head或body标记，我需要单击两次提交按钮，然后Ajax表单或我需要做的任何事情都能正确完成，但我需要点击两次。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>XXXX</title>

    <!--Este es el JS que hace que funcione Phonegap-->
    <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>    

    <!--JS específicos de Jquery Mobile-->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.mobile-1.4.2.min.js"></script> 

    <!--Estos son script creados para la aplicacion-->
    <script src="js/md5.js"></script>
    <script src="js/login.js"></script>

    <!--CSS del tema que he creado para apotecalia-->
    <link rel="stylesheet" href="themes/XXXX.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.min.css" />  

</head>
<div id="login">

    <div data-role="header" data-position="fixed">
    </div>

    <div data-role="content">   

        <form id="check-user" data-ajax="false">
            <fieldset>
                <div data-role="fieldcontain">
                    <label> Usuario </label>
                    <input type="text" id="correo" name="correo">
                </div>
                <div data-role="fieldcontain">
                    <label> Contrase&ntilde;a </label>
                    <input type="password" id="pwd" name="pwd" >
                </div>
                <input type="submit" data-role="button" value="Acceder" name="enviar" id="enviar">

</fieldset>
        </form>
    </div>

    <div data-role="footer" data-position="fixed">
    </div>
</div>

</body>
</html>

Login.js

$(function () {
    $('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());    
    } 
 });
});

但是，如果我将脚本代码放入需要使用它的标记页面中，我不需要单击两次，但我无法获取数据表单来执行我的Ajax请求。

相同的代码，但如果我将脚本代码放入data-role="page"，我必须将此代码放入所有标记中......在这种情况下，警报为空。

<div id="login">
 <script src="js/login.js"></script>

    <div data-role="header" data-position="fixed">
    </div>

    <div data-role="content">

我不知道怎么做，我试了两个星期来解决这个问题，我需要你的帮助。

Answer 1

将您的脚本包含在head标记中。

声明您的页面容器<div data-role="page" id="login">。

将login.js中的代码更改为：

$(document).on("pageinit", "#login", function(event, ui)
{
    $(document).on("click", "#enviar", function(event)
    {
        if ($('#correo').val().length > 0 && $('#pwd').val().length > 0)
            alert($('#correo').val() + $('#pwd').val());
    });
});

Answer 2

添加简单的 类型=＆＃34;按钮＆＃34; 而不是 类型=＆＃34;提交＆＃34; 。

<input type="button" data-role="button" value="Acceder" name="enviar" id="enviar">

$(function () {

  $('#enviar').click( function() {       

      if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
         alert($('#correo').val() + $('#pwd').val());

        // Add code here submit form data using Ajax 

        var ajax_call = your_serviceURL;                  
        var str = $('#check-user').serialize();  

        $.ajax({
             type: "POST",
             url: ajax_call,
             data: str,
             dataType: "json",
             success: function(response){                              
                  // It's success json response
              }
        }).done(function() {

        }) 

      }

   });
});

我需要两次clic或无法获取数据表单

2 个答案: