Question

我正在尝试使用innerHTML将某些数据插入html页面，如下所示

for(i = 0; i < data.length; i++){
var line = data[i].split("~");

nameslist.innerHTML += '<p onClick='+userclick(line[1])+'><strong>' + line[0] + ' </strong></p>';

}

但是onclick事件会在插入后立即自动触发，当我单击<p>元素

时不会触发

我如何正确使用innerhtml添加带有onclick事件的p元素并仅在用户单击时才触发它？

Answer 1

如果您愿意采用其他方法，可以将事件侦听器添加到父节点，并使click事件冒泡到父节点。

可以在此处找到示例： https://davidwalsh.name/event-delegate

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
    // e.target is the clicked element!
    // If it was a list item
    if(e.target && e.target.nodeName == "LI") {
        // List item found!  Output the ID!
        console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
    }
});

我如何在innerHTML中设置onclick事件？

1 个答案: