时间戳

首页 > 解决方案 > 动态生成的列表中的匿名函数产生 SyntaxError

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

问题描述

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

标签： javascript

解决方案

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

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

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

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

推荐阅读