jQuery Mobile 提交无法立即识别为 ajax 上的提交操作-解网

问：

我有一个jQuery Mobile注册表，带有验证插件。

<!doctype html>
<html>
<head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Include jQuery Mobile stylesheets -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Include the jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- Include the jQuery Mobile library -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
 <style>
 label.error {
     float: none;
     color: red;
     font-size: 16px;
     font-weight: normal;
     line-height: 1.4;
     margin-top: 0.5em;
     width: 100%;
     display: block;
     margin-left: 22%;
 }
 </style>
<title>Registrasi</title>

</head>
<body>

<div data-role="page" data-theme="c" id="registerpage">
    <div data-role="header" id="headerMain" name="headerMain">
      <h2>Registrasi</h2>
    </div>

  <div data-role="content">
    <form name="frmCreate" id="frmCreate">
    <div id="usernamediv" data-role="fieldcontain" class="ui-field-contain">
      <label for="username">Username:</label>
      <input id="username" name="username" type="text"  class="ui-input-text required" />
    </div>

    <div id="namediv" data-role="fieldcontain" class="ui-field-contain">
      <label for="name">Name:</label>
      <input id="name" name="name" type="text" class="ui-input-text required" />
    </div>

    <div id="emaildiv" data-role="fieldcontain" class="ui-field-contain">
      <label for="email">email:</label>
      <input id="email" name="email" type="email"  class="ui-input-text required email"/>
    </div>

    <div id="passworddiv" data-role="fieldcontain" class="ui-field-contain">
      <label for="password">Password:</label>
      <input id="password" name="password" type="password"  class="ui-input-text required" />
    </div>

    <div id="passwordagaindiv" data-role="fieldcontain" class="ui-field-contain">
      <label for="passwordagain">Password lagi:</label>
      <input id="passwordagain" name="passwordagain" type="password"  class="ui-input-text required" />

    </div>

    <button id="btnRegister" name="btnRegister" id="btnRegister" class="ui-btn btn btn-primary" data-role="button" data-corners="false">
      Register
    </button>
    </form>

  </div>



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

</div>

<!-- some other html //-->

</body>
</html>
<script>
$(document).ready(function() {

  $("#frmCreate").validate({
    rules: {
        username: {
          required: true,
          minlength: 5,
        },
        name: {
          required: true,
          minlength: 3,
        },
        email: {
          required : true,
          email: true,
        },
        password: {
          required: true,
          minlength: 6,
        },
        passwordagain: {
          required: true,
          equalTo: "#password",
        }
    },
    messages: {
        username: {
            required: "harus diisi",
            minlength: "minimal 5 karakter",
        },
        name: {
            required: "harus diisi",
            minlength: "minimal 3 karakter",
        },
        email:{
            required: "harus diisi",
            email: "harus berformat email"
        },
        password: {
            required:  "harus diisi",
            minlength: "minimal 6 karakter",
        },
        passwordagain: {
            required: "harus diisi",
            equalTo: "harus sama dengan password",
        }

    },
    errorClass: "error",
    submitHandler: function(form) {
      alert("y");
      $("form").submit(function (event) {
        $.mobile.loading("show");
        alert('x');
        event.preventDefault();


        var formData = {
            username: $("#username").val(),
            name:     $("#name").val(),
            email:    $("#email").val(),
            password: $("#password").val(),
        };


        $.ajax({
          type:   "POST",
          url:    "http://localhost:8080/api/user",
          data:   formData,
          dataType: "json",
          encode:   true,
          async: false,
            }).done(function (data) {
              console.log(data);
              $.mobile.loading("hide");
              
            })
            .fail(  function (jqXHR, status, error) {
                console.log(jqXHR.responseText);
                $.mobile.loading("hide");
                
            });


      });
    }

  });



});

</script>

如果我点击提交按钮，它不会自动提交。当我第二次按下按钮时，它会提交。btnRegister

我使用 alert（'y'）和 alert（'x'）调试它，然后我怎么知道第一次点击按钮不会触发提交操作。

知道如何解决这个问题吗？

谢谢

jquery ajax 按钮 jquery-mobile 提交

答：

0赞 Danny Gunawan 10/6/2022 #1

您不需要调用，因为它将定义提交事件，但不会调用该事件。$("form").submit(function(event){..})

submitHandler: function(form) {
        alert("y");
        $.mobile.loading("show");
        alert('x');

        var formData = {
            username: $("#username").val(),
            name:     $("#name").val(),
            email:    $("#email").val(),
            password: $("#password").val(),
        };
    
        $.ajax({
          type:   "POST",
          url:    "http://localhost:8080/api/user",
          data:   formData,
          dataType: "json",
          encode:   true,
          async: false,
        }).done(function (data) {
              console.log(data);
              $.mobile.loading("hide");
              
        }).fail(  function (jqXHR, status, error) {                    
              console.log(jqXHR.responseText);
              $.mobile.loading("hide");                    
        });    
    }
}

上一个：将 jQuery UI 和 JQuery Mobile cdns 添加到项目中，但主题获胜;t 工作

下一个：如何使网站投资组合部分中的项目下拉列表加载速度更快？

jQuery Mobile 提交无法立即识别为 ajax 上的提交操作

jQuery Mobile submission not instantly recognized as submit action on ajax

评论