Question

我使用循环来创建元素数组（链接），然后使用事件处理程序（一个函数为所有）附加它们并添加到DOM。但事件处理程序只有在我点击最后一个链接时才会做出反应代码：

xGetUsers = new XMLHttpRequest();
xGetUsers.open("GET","dialogs.php",true);
xGetUsers.send();
xGetUsers.onreadystatechange = function(){
    if (xGetUsers.readyState==4 && xGetUsers.status==200){
        var jUsers=eval("("+xGetUsers.responseText+")");
        if(jUsers){
            var length = jUsers.length;
            var dialogLink = [];
            for(var i=0; i<length; i++) {
                dialogLink[i] = document.createElement("a");
                dialogLink[i].innerHTML = "Go dialog";
                dialogLink[i].usrn = jUsers[i][0];
                dialogLink[i].userID = parseInt(jUsers[i][3]);
                dialogLink[i].id = i;
                dialogLink[i].onclick = getDialog;
                var userinfo = '<div><p>'+jUsers[i][0];
                if(jUsers[i][1]!=0) userinfo += '('+jUsers[i][1]+')';
                userinfo += '</p><p>'+jUsers[i][2]+'</p></div>';
                main_div.innerHTML += userinfo;
                main_div.appendChild(dialogLink[i]);
                }
            }
        }

    }
}

getDialog（）函数：

function getDialog(){
    enduser_id = this.userID;
    enduser_name = this.usrn;
    main_div.innerHTML = '<form><textarea  id="resz"></textarea><a href="" id="send_button" class="main-button">Send</a></form>';
    xLoadMessages.open("GET","get_messages.php?get_id="+enduser_id,true); 
    xLoadMessages.send();
    field = document.getElementById("resz");
    document.getElementById("send_button").onclick = function(){
        if(field.value!=""){
            var message="id="+enduser_id+"&message="+field.value;
            xSendMessage.open("POST","add_message.php",true);
            xSendMessage.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xSendMessage.send(message);
        }
        return false;
    }
    setTimeout(setRefresh, 3000);
    return false;
}

它只对最后一个链接做出反应。我搜索了很长时间并尝试了不同的方法来添加事件处理程序，但没有任何帮助。求助（。

Answer 1

我怀疑您的问题来自于您使用相同的ID创建多个元素，然后使用document.getElementById()来获取它们。当然，这将无效，您的浏览器决定只提供带有该ID的 last 元素。

更一般地说，您的代码需要一些模块化。您需要单独的功能来处理Ajax，建立用户界面和用户交互。

Ajax接口的一个非常简单的实现可能如下所示：

function http() {}
http.urlEncode = function (data) {
    var keys = typeof data === "object" && data ? Object.keys(data) : [],
        enc = encodeURIComponent,
        result = [], key, val;
    if (keys.length && !Array.isArray(data)) {
        while (keys.length) {
            key = keys.pop();
            val = data[key];
            if (typeof val === "undefined") continue;
            result.push(enc(key) + "=" + enc(val));
        }
        return result.join("&");
    } else if (typeof data !== "undefined") {
        return enc("" + data);
    }
};
http.request = function (success, error) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (this.readyState !== 4) return;
        if (this.status == 200 && typeof success === "function") success.call(this);
        if (this.status != 200 && typeof error === "function") error.call(this);
    };
    return req;
};
http.get = function (url, data, success, error) {
    var req = http.request(success, error);
    data = http.urlEncode(data);
    req.open("GET", url.replace(/\?.*/, "") + (data ? "?" + data : ""));
    req.send();
};
http.post = function (url, data, success, error) {
    var req = http.request(success, error);
    req.open("POST", url);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send(http.urlEncode(data));
};

现在您可以使用方便的http.get()和http.post()辅助函数来接受数据和回调参数。

接下来，你需要一个可以构建HTML元素的函数，一个基本的可以看起来像这样：

function newElem(source, text) {
    var elem;
    if (templ.slice(0, 1) === "<") {
        elem = document.createElement("div");
        elem.innerHTML = source;
        elem = elem.firstChild;
    } else {
        elem = document.createElement(source);
    }
    elem.textContent = text;
    return elem;
}

基于此，您可以创建一个从服务器返回的内容构建用户元素的函数：

function buildUser(data, getDialogHandler) {
    var user, line1, line2, link;

    user = newElem("div");
    line1 = newElem("p", data[0] + (data[1] ? ' (' + data[1] + ')' : "");
    line2 = newElem("p", data[2]);
    link = newElem("<a>Go dialog</a>");
    link.onclick = function (event) {
        getDialogHandler(parseInt(data[3], 10));
    };
    user.appendChild(line1);
    user.appendChild(line2);
    user.appendChild(link);
    return user;
}

现在您可以设置创建用户界面的功能。请注意我如何完全避免使用任何全局变量或HTML ID，而只使用DOM对象引用。

http.get("dialogs.php", null, function () {
    var mainDiv = document.getElementById("main_div"),
        users;

    try {
        users = JSON.parse(this.responseText);
        users.forEach(function (data) {
            var user = buildUser(data, getDialog);
            mainDiv.appendChild(user);
        });
    } catch (ex) {
        console.log(ex);
    }
});

function getDialog(userId){
    var mainDiv = document.getElementById("main_div"),
        textArea = newElem("textarea"),
        sendBtn = newElem('<a class="main-button">Send</a>');

    sendBtn.onclick = function () {
        if ( !textArea.value ) return;
        http.post("add_message.php", {
            id: userId,
            message: textArea.value
        }, function () {
            // whatever you want to do on add_message success
        });
        return false;
    };

    mainDiv.innerHTML = "";
    mainDiv.appendChild(textArea);
    mainDiv.appendChild(sendBtn);

    http.get("get_messages.php", {get_id: userId}, function () {
        // whatever you want to do on get_messages success
    });

    // setRefresh is never defined anywhere...
    setTimeout(setRefresh, 3000);
}

备注/建议

jQuery实现HTTP处理，事件处理，元素构建和无数其他事情。你在上面看到，如果没有jQuery，做这些事情并非不可能，但考虑它并不会有什么坏处。
您可以极大地改进使用HTML模板引擎构建动态HTML用户界面的过程。考虑使用（例如）Handlebars（这甚至适用于在服务器端创建HTML）。
我非常确定您要使用JSON.parse()代替eval()。
以上代码是一个值得借鉴的例子。在理解之前不要复制并粘贴它。这也意味着我不保证它没有错误。

Javascript在循环中附加事件处理程序

1 个答案: