jQuery Mobile 提交不会立即被识别为 ajax 上的提交操作答案

【问题标题】：jQuery Mobile submission not instantly recognized as submit action on ajaxjQuery Mobile 提交不会立即被识别为 ajax 上的提交操作
【发布时间】：2022-10-06 23:29:07
【问题描述】：

我有一个带有验证插件的 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/jquery-validation@1.19.3/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 它不会自动提交。当我第二次按下按钮时，它将提交。

我使用警报（\'y\'）和警报（\'x\'）对其进行调试，然后我怎么知道第一次单击按钮不会触发提交操作。

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

谢谢你

标签： jquery ajax button jquery-mobile submit

【解决方案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");                    
        });    
    }
}

【讨论】：