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