После получения формы с использованием 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