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);

这些行都没有成功地从脚本中添加事件。但是，当我从控制台调用上面两行中的任何一行时，它就能正常工作并附上事件。

为什么它可以从控制台运行而不是从脚本运行？

Answer 1

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

不起作用，因为您没有通过事件参数。 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

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

1 个答案: