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

使用AJAX获取表单后，该表单上的行为将丢失

1 个答案: