Après avoir obtenu un formulaire en utilisant AJAX le comportement sur ce formulaire est perdu

Question

J'ai fait un formulaire de connexion simple où un utilisateur peut cliquer sur un bouton de registre.

I chargé le formulaire d'inscription en utilisant AJAX, mais il ne sera pas garder le comportement que je scripté sur le journal sous forme même si je l'ai utilisé les mêmes noms de classe ...

requête 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); 
}(); 

Forme Comportement:

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 (avant register.html) prend sa place.

<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

Je pense que vous devez relier le comportement du formulaire au contenu nouvellement chargé. Ainsi,

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