在创建带有onclick事件的div标签时使用object.innerHTML或$ object.append时，它也不允许我传递变量

Question

I'm creating a chat application where when a message is received the user can click on the message and see information about it, the application works and there are no errors in any other part of the code however, when I add the message to the chat div element (in it's own div), although the message shows with the variables passed in correctly (usernames, color of text and message) when I add the onclick element it won't display the information.

I have tried two possible methods:

Using jquery and appending:

    $chat.append("<div id =\'"+user+"\' style=\'color:"+color+";\' onclick='alert("+user+")'>"+user+ ": " + msg + "<br/></div>");

Using innerHTML:

    var content = chat.innerHTML;
    chat.innerHTML = content + "<div id=\'"+user+"\' style=\'color:"+color+";\' onclick='alert("+user+")'>"+user+ ": "+msg+"<br/><div>";        

As said, everything else works fine but the onclick function does not work and displays an alert box but with no information just "[object HTMLcollection]".

Answer 1

You have something strange with quotes. Try this:

$('.chat').append('<div id =' + user + ' style=color:' + color + ';onclick=alert("' + user + '")>' + user + ': ' + msg + '<br/></div>');

EDIT: You don't need to add extra quotes for id value or style value but need to add it for alert argument instead.