为什么不能在脚本中附加事件而在控制台中？

Question

我想用 html 和 javascript 动态创建、填充和清除列表。列表的创建和填充工作正常，但是当我想将删除按钮添加到列表项时，我无法将 onclick 事件附加到新创建的元素。这是我的完整函数，每次printlist 数组发生一些变化时都会调用它：

var printlist = [];
var awesome = document.createElement("i");
awesome.className = "fa fa-minus";

function addToList(stationid, stationname)
{
    var object = {id: stationid, name: stationname};
    printlist.push(object);
    drawList();
}

function removeFromList(id)
{
    printlist.splice(id, 1);
    drawList();
}

function drawList()
{
    if (printlist.length > 0)
    {
        document.getElementById("printListDialog").style.visibility = 'visible';
        var dlg = document.getElementById("DlgContent");
        dlg.innerHTML = "";
        for (var i = 0; i < printlist.length; i++)
        {
            var item = document.createElement("li");
            item.className = "list-group-item";
            var link = document.createElement("a");
            link.href = "#";
            link.dataset.listnumber = i;
            link.style.color = "red";
            link.style.float = "right";
            link.appendChild(awesome);
            link.onclick = function(){onRemove();};
            item.innerHTML = printlist[i].name + " " + link.outerHTML;
            dlg.appendChild(item);
        }
    }
    else
    {
        document.getElementById("printListDialog").style.visibility = 'hidden';
    }
}

function onRemove(e)
{
    if (!e)
        e = window.event;
    var sender = e.srcElement || e.target;
    removeFromList(sender.dataset.listnumber);
}

我试过了：

link.onclick = function(){onRemove();};

还有

link.addEventListener("click", onRemove);

这两行都没有成功从脚本中添加事件。但是，当我从控制台调用上述 2 行中的任何一行时，它可以工作并且事件已附加。

为什么它可以从控制台运行，但不能从脚本运行？

Answer 1

link.onclick = function(){onRemove();};

不起作用，因为您没有通过 event 参数。 link.onclick = onRemove 应该与您的 addEventListener 通话一样工作。

但是，由于线路的原因，它们都不起作用

item.innerHTML = printlist[i].name + " " + link.outerHTML;

它破坏了link 元素及其所有动态数据，如.dataset 或.onclick，并形成一个不包含它们的原始html 字符串。他们迷路了。

不要使用 HTML 字符串！

将行替换为

item.appendChild(document.createTextNode(printlist[i].name + " "));
item.appendChild(link); // keeps the element with the installed listener