動態生成列表中的匿名函數產生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>`;