动态生成的列表中的匿名函数产生 SyntaxError答案

【问题标题】：Anonymous function in dynamically generated list producing SyntaxError动态生成的列表中的匿名函数产生 SyntaxError
【发布时间】：2019-05-31 20:26:32
【问题描述】：

我想在动态生成的列表中放置一个 onclick 事件。我不能像updateRoomID(arg)一样使用它，因为它会立即触发。所以我把它放在一个匿名函数中，正如网上各种消息来源所建议的那样：function (){updateRoomID(arg)}。但这会导致：“Uncaught SyntaxError: Unexpected token (”。开发者工具说问题出在function()。

它所在的代码部分：

socket.onmessage = function(event) {
    var msg = JSON.parse(event.data);
    for (let i = 0; i < msg.length; i++) {
        if (msg[i].beingserved == false) {
            listRooms.innerHTML += '<li id=' + msg[i].roomid +

                                   // Problem on following line.
                                   ' onclick=' + function () { updateRoomID(msg[i].roomid) } +
                                    '>' +
                                    '<a href="#">' +
                                    msg[i].roomid +
                                    '</a></li>';
        } else {
            document.getElementById(msg[i].roomid).remove();
        };
    };
};

我已经尝试将函数用作引号内的字符串：<li id=' + msg[i].roomid +' onclick="function(){updateRoomID(msg[i].roomid)}">'。我尝试将 onclick 处理程序放在 href 链接中，并将其替换为 addEventListener。但是我在这些尝试中遇到了同样的错误。

如果我尝试 function(){updateRoomID(arg)}() 后面加上括号，它会按预期立即触发。

我整天都在查看它，但无法弄清楚语法错误在哪里。我对 JavaScript 很陌生。我做错了什么？

【问题讨论】：

如果你控制台日志document.clientlistForm，它会返回什么？我猜它可能会返回 undefined

标签： javascript

【解决方案1】：

您不能将函数放在onclick 属性中。它包含应执行的 JavaScript 源代码。

在这种情况下你应该做的是将函数调用作为一个字符串，但替换为参数的值。

使用模板文字使这更容易。

listRooms.innerHTML += `
    <li id="${msg[i].roomid}" onclick="updateRoomId(${msg[i].roomid})">
      <a href="#">${msg[i].roomid}</a>
    </li>`;

【讨论】：