时间戳

首页 > 解决方案 > element.onclick not 在单击元素时不调用函数

javascript - element.onclick not 在单击元素时不调用函数

问题描述

我正在动态构建一个模态。我想在这个模式中制作一些按钮来打开SubModal. 按钮显示在 html 中，但单击这些按钮没有任何作用。这是我的代码。

const subtaskList = document.getElementById('subtaskList');
for (const subtaskIndex in task.subtasks) {
    const subtaskButton = document.createElement('button');
    subtaskButton.classList.add('taskModalSubtaskButton');
    subtaskButton.onclick = () => {
        openSubTaskModal(task.subtasks[subtaskIndex], task);
    }
    subtaskButton.innerText = task.subtasks[subtaskIndex].name;
    subtaskList.appendChild(subtaskButton);
    subtaskList.innerHTML += '<br>';
}

在进行故障排除时，我制作了一个数组来保存按钮并使用 console.log() 来查看它的元素。他们都有这个onclick功能。我通过获取他们的类名而单击了开发控制台中的按钮，所以我知道这不是显示问题。我觉得我误解了一些东西，任何帮助将不胜感激。

标签： javascripthtml

解决方案

问题是subtaskList.innerHTML += '<br>';改用它是个好主意subtaskList.appendChild(document.createElement("br"));。

这是工作片段：

function doSomething(url) {
    alert(url);
}

const subtaskList = document.getElementById('subtaskList');
for (var i = 0; i < 3; i++) {
    const subtaskButton = document.createElement('button');
    subtaskButton.classList.add('taskModalSubtaskButton');

    subtaskButton.innerText = "name" + i;

    subtaskButton.onclick = (function (url) {
                return function () {
                    doSomething(url);
                };
            })("URL #" + i)

    subtaskList.appendChild(subtaskButton);
    subtaskList.appendChild(document.createElement("br"));
}
<div id="subtaskList"></div>

我还更改了一个位onclick函数以将相应的索引发送到doSomething函数

推荐阅读