Javascript 我必须在jquery按钮上单击两次才能提交注册表单

如果密码不匹配，我有一个隐藏提交按钮的页面。如果它们匹配，则会出现按钮，但需要单击两次以提交表单

html页面

        <form action="registeration.php"  method="post">
          <input style="font-size:15px; text-align: right" type="tel" pattern="[\d\u0660-\u0669]+" placeholder="رقم الجوال ويفضل أن يكون مربوط بالواتس آب" name="Phone" required oninvalid="this.setCustomValidity('ضع رقم هاتف جوال هنا!')" onchange="this.setCustomValidity('')" oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')" minlength="10" maxlength="10">
          <input style="font-size:20px; text-align: right" type="text" placeholder="الأسم أو الكنية أو أسم المكتب" maxlength="24" name="User" required oninvalid="this.setCustomValidity('الأسم أو الكنية أو أسم المكتب')" onchange="this.setCustomValidity('')">
          <input style="font-size:20px; text-align: right" type="password" placeholder="كلمة المرور" id="txtNewPassword" maxlength="24" name="Password" required oninvalid="this.setCustomValidity('أدخل الرقم السري هنا')" onchange="this.setCustomValidity('')">
          <input style="font-size:20px; text-align: right" type="password" placeholder="قم بإعادة كتابة كلمة المرور" id="txtConfirmPassword" maxlength="25" onChange="checkPasswordMatch();" name="Repassword" required oninvalid="this.setCustomValidity('أعد إدخال الرقم السري هنا')" onchange="this.setCustomValidity('')">
          <div class="registrationFormAlert" id="divCheckPasswordMatch"> </div>
        </form> 

jquery

function checkPasswordMatch() {
    var Password = $("#txtNewPassword").val();
    var Repassword = $("#txtConfirmPassword").val();

    if (Password != Repassword)
        $("#divCheckPasswordMatch").html('<div style="text-align: right" class="alert alert-danger" role="alert"> !<b>خطأ:</b> الرقم السري غير متطابق </div>');
    else
        $("#divCheckPasswordMatch").html('<button type="submit" class="btn btn-primary btn-block btn-large">قم بإنشاء الحساب</button>');
}

$(document).ready(function () {
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

函数checkPasswordMatch（）{
var Password=$（“#txtNewPassword”）.val（）；
var Repassword=$（“#txtConfirmPassword”）.val（）；
如果（密码！=重新密码）
$（“#divCheckPasswordMatch”）.html（“！طأ：أ；
其他的
$（“divCheckPasswordMatch”）.html（“divCheckPasswordMatch”）；
}
$（文档）.ready（函数（）{
$（“#txtConfirmPassword”）.keyup（checkPasswordMatch）；
});

编辑添加了代码段

函数checkPasswordMatch（）{
var Password=$（“#txtNewPassword”）.val（）；
var Repassword=$（“#txtConfirmPassword”）.val（）；
如果（密码！=重新密码）
$（“#divCheckPasswordMatch”）.html（“！طأ：أ；
其他的
$（“divCheckPasswordMatch”）.html（“divCheckPasswordMatch”）；
}
$（文档）.ready（函数（）{
$（“#txtConfirmPassword”）.keyup（checkPasswordMatch）；
});
//对于测试，不希望实际提交
$（“表格”）。在（“提交”，函数（）上{
控制台日志（“提交”）；
返回false；
});
为什么不直接显示和隐藏它


函数checkPasswordMatch（）{
var Password=$（“#txtNewPassword”）.val（）；
var Repassword=$（“#txtConfirmPassword”）.val（）；
返回密码===重新密码；
}
$（函数（）{
$（“形式”）。关于（“更改”，函数（）{
const ok=checkPasswordMatch（）；
$（“[type=submit]”。切换（确定）
$（“.alert”）。切换（！确定）
});
});
.hide{
显示：无
}

!خطأ: الرقم السري غير متطابق 
قم بإنشاء الحساب
问题不在于您必须单击它两次，而是当您单击它时，它正在被重新创建，因此您实际上不是第一次单击它

你两者都有

onChange="checkPasswordMatch();" 

及

因此，当您键入相同的第二个密码时，该按钮会出现，然后您立即“单击”该按钮，但是，当您用鼠标向下点击
onChange
时，会触发删除您的按钮并创建一个新的按钮，该按钮不会注册您的“单击”，因为它没有按下鼠标

您可以确认这一点：键入相同的第二个密码，然后在第二个输入之外单击（但不在按钮上），然后单击该按钮，即可正常工作

或者，删除额外的
onchange=
并使用过时的onXX=或jquery事件处理程序，不要混合和匹配它们

更新的代码段：


函数checkPasswordMatch（）{
var Password=$（“#txtNewPassword”）.val（）；
var Repassword=$（“#txtConfirmPassword”）.val（）；
如果（密码！=重新密码）
$（“#divCheckPasswordMatch”）.html（“！طأ：أ；
其他的
$（“divCheckPasswordMatch”）.html（“divCheckPasswordMatch”）；
}
$（文档）.ready（函数（）{
$（“#txtConfirmPassword”）.keyup（checkPasswordMatch）；
});
//对于测试，不希望实际提交
$（“表格”）。在（“提交”，函数（）上{
控制台日志（“提交”）；
返回false；
});

@mplungjan您能详细说明一下吗？提交按钮在哪里？此外，你有许多事件与这些输入绑定，这将导致你不可避免headache@maxshuty在这里：
$（“#divCheckPasswordMatch”）.html（“@freedomn-m Ups…完全错过了这一点。我认为它被用作
keyup
处理程序是唯一的地方：/@Andreas我不得不在我添加的编辑/代码片段中重新格式化html来查看它-讨厌一行html，因为它只是隐藏了这样的东西
$("#txtConfirmPassword").keyup(checkPasswordMatch);