使用 .load(）添加 HTML 表单有一些问题

Using .load() to add HTML form have some issues

我正在使用 ajax 和 PHP 创建登录 Web 应用程序，我使用 JavaScript 和 PHP 来验证输入，它适用于登录表单，但我在表单下添加了一个链接，如果在表单下的链接之前没有注册，我在表单下添加了一个链接它的 HTML 是：

 <a href="#" onclick="signUpForm()">don't have account on tobe?</a>

和 signUpForm（）函数包含

function signUpForm(){
    $(".logInForm").load("SignUpForm.html");
}

它工作内容更改但是当我使用 JS 使用代码验证输入时（就像登录代码女巫正在工作一样）：HTML（SignUpForm 中的输入.html调用 signUp（）函数）

<input type="button" value="Sign Up" onclick="signUp()">
function signUp(){
    if($("input[class='user']").val()==""|| $("input[class='pass']").val()==""){
        $(".error-message").fadeIn();
        document.getElementById("error-message").innerHTML="Please fill all fields";
    } else{
     //action(2) including the php file loading 
    } 
}

会发生什么情况是 JavaScript 忽略新的输入字段并认为被删除并始终转到操作（2）如何让 JS 看到新的表单 HTML？

假设我正确理解了您的问题，我认为这段代码应该可以帮助您站稳脚跟（http://codepen.io/trevorhreed/pen/bppxRG?editors=1010）。

在此示例中，我使用的是$(...).html(...)而不是$(...).load(...)，因为我没有托管HTML文件的服务器，但是将.html(...)换成.load(...)应该可以正常工作。

console.clear();
$(function(){
  var placeholder = $('#placeholder'),
      signInTpl = $('#signin').html(),
      signUpTpl = $('#signup').html();
   
  function goToSignIn(){
    placeholder.html(signInTpl);
    // or placeholder.load('signin.html');
    var btnSignIn = $('#btnSignIn'),
        signInUsername = $('#signinUsername'),
        signInPassword = $('#signinPassword');
    btnSignIn.on('click', function(){
      if(signInUsername.val() == '' || signInPassword.val() == ''){
        alert('Sign In form is NOT valid');
      }else{
        alert('Sign In form is valid');
      }
    })
  }
  
  function goToSignUp(){
    placeholder.html(signUpTpl);
    // or placeholder.load('signup.html');
    var btnSignUp = $('#btnSignUp'),
        signUpUsername = $('#signupUsername'),
        signUpPassword = $('#signupPassword');
    btnSignUp.on('click', function(){
      if(signUpUsername.val() == '' || signUpPassword.val() == ''){
        alert('Sign Up form is NOT valid');
      }else{
        alert('Sign Up form is valid');
      }
    })
  }
  
  goToSignIn();
    
  $('#btnGoToSignUp').on('click', function(){
    goToSignUp();
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="placeholder"></div>
<template id="signin">
  <h2>Sign In</h2>
  <form method="post">
    <label>
      Username
      <input id="signinUsername" />
    </label>
    <label>
      Password
      <input id="signinPassword" />
    </label>
    <a href="javascript:void(0)" id="btnGoToSignUp">Sign Up</a>
    <button type="button" id="btnSignIn">Sign In</button>
  </form>
</template>
<template id="signup">
  <h2>Sign Up</h2>
  <form method="post">
    <label>
      Username
      <input id="signupUsername" />
    </label>
    <label>
      Password
      <input id="signupPassword" />
    </label>
    <button type="button" id="btnSignUp">Sign In</button>
  </form>
</template>

使用 .load(） 添加 HTML 表单有一些问题

Using .load() to add HTML form have some issues