javascript - 动态生成的列表中的匿名函数产生 SyntaxError

Question

我想在动态生成的列表中放置一个 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 很不熟悉。我做错了什么？

Answer 1

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

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

使用模板文字可以使这变得更容易。

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