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

Question

I'm using the loop to create array of elements(links) and then attaching them with event handlers(one function for all) and adding to the DOM. But event handler react only then I click on the last link. Code:

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:

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;
}

It react only on last link. I searched for a long time and tried different ways for adding event handler but nothing helped. Help please(.

Answer 1

I suspect your problem comes from the fact that you create multiple elements with the same ID and then use document.getElementById() to pick them up. Naturally that won't work, your browser decides to give only the last element with that ID.

More generally speaking you are in need of some modularity in your code. You need separate functions that deal with Ajax, with user interface building and with user interaction.

A very simple implementation of an Ajax interface could look like this:

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));
};

Now you have convenient http.get() and http.post() helper functions that accept data and callback parameters.

Next you need a function that can build HTML elements, a rudimentary one could look like this:

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;
}

Based on that you can create a function that builds a user element from what the server returns:

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;
}

And now you can set up the functions that create your user interface. Note how I completely avoid any global variables or HTML IDs and instead work with DOM object references only.

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);
}

Notes / Recommendations

• jQuery implements HTTP handling, event handling, element building and countless other things. You see above that it's not impossible to do all those things without jQuery, but it wouldn't hurt to consider it.
• You can greatly improve the process of building dynamic HTML user interfaces with HTML templating engines. Consider using (for example) Handlebars (this even works for creating HTML on the server side).
• I'm very sure you want to use JSON.parse() instead of eval() .
• The code above is meant as an example to learn from. Don't copy and paste it before you understand it. That also means I give no guarantees that it has no bugs.