使用AJAX獲取表單後，表單上的行爲丟失

Question

我做了一個簡單的登錄表單，用戶可以點擊註冊按鈕。

我加載使用AJAX寄存器形式，但它不會讓我的日誌形式，即使我已經使用了相同的類名腳本的行爲......

AJAX請求：

var displayRegisterForm = function() { 
    var regLink = document.getElementById("signInBoxFooter"); 
    regLink.addEventListener("click", function(){ 
     var request = new XMLHttpRequest(); 
     request.open("GET", "register.html"); 
     request.onreadystatechange = function(){ 
      if (request.readyState === 4 && request.status === 200){ 
       document.getElementById("signInBody").innerHTML = request.responseText; 
      } else { 
       document.getElementById("signInBody").innerHTML = "Whoops something went wrong!" 
      } 
     }; 
     request.send(null); 
    },false); 
}(); 

表單行爲：

var textInput2 = function(){ 
var inputs = document.getElementsByClassName("inputNoFocus"); 
for (i = 0; i < inputs.length; i++){ 
    var input = inputs[i]; 
    var busy = false; 
    input.addEventListener("focus", function(e){ 
     var defaultValue = this.getAttribute("value"); 
     if(this.value === defaultValue){ 
      this.value = ""; 
      this.setAttribute("class", "inputFocus"); 
     } 
     if(defaultValue === "Password"){ 
      this.setAttribute("type", "password"); 
      this.setAttribute("class", "inputFocus"); 
     } 
     this.parentNode.parentNode.setAttribute("class", "divFocus"); 
     busy = true; 
    }, false); 

    input.addEventListener("blur", function(e){ 
     var defaultValue = this.getAttribute("value"); 
     if(this.value === ""){ 
      this.value = defaultValue; 
      this.setAttribute("class", "inputNoFocus"); 
     } 
     if(this.value === "Password"){ 
      this.setAttribute("type", "text"); 
      this.setAttribute("class", "inputNoFocus"); 
     } 
     this.parentNode.parentNode.setAttribute("class", "divNoFocus") 
     busy = true; 
    },false); 
} 
}(); 

HTML（register.html）

<div class="boxBody"> 
    <form id="regForm"> 
     <div id="regTop"></div> 
     <div class="divNoFocus"> 
      <label><input class="inputNoFocus" type="text" value="Email Address"></label> 
     </div> 
     <div class="divNoFocus"> 
      <label><input class="inputNoFocus" type="text" value="First Name"></label> 
     </div> 
     <div class="divNoFocus"> 
      <label><input class="inputNoFocus" type="text" value="Surname"></label> 
     </div> 
    </form> 
</div> 

HTML（在register.html之前）取代它的位置。

<div id="signInBody" class="boxBody"> 
    <form id="login"> 
     <div class="divNoFocus"> 
      <label><input class="inputNoFocus" type="text" value="Username or Email"></label> 
     </div> 
     <div class="divNoFocus"> 
      <label><input class="inputNoFocus" type="text" value="Password"></label> 
     </div> 
    </form> 
</div> 

Answer 1

我認爲你需要將表單行爲重新綁定到新加載的內容。所以，

if (request.readyState === 4 && request.status === 200){ document.getElementById("signInBody").innerHTML = request.responseText; // Wrap your form behaviour in a function that you can call here