javascript - 如何在 DOM 创建后创建的元素上添加函数？

Question

我有一个函数可以创建具有唯一 ID 的 html 元素。

之后我希望当我单击这个元素时我可以调用一个新函数。

简单示例:

1)我单击“创建元素”按钮；

2) 创建一个 id 为“New_Element”的元素；

3)我点击“New_Element”；

4) 我得到一个已经预设到该元素的函数。

我当前用于创建元素的代码。

var pageRows = document.getElementsByClassName('pageRows');
var pageRowID = "section";

var el = document.createElement('section');

el.setAttribute('id', pageRowID + pageRows.length);

var row = document.getElementById('allNewRows');
row.parentNode.appendChild(el);

el.innerText = "New " + pageRows.length + " ROW!";

现在创建了 id“pageRowId0”的元素，我希望有一个在单击此元素时可以运行的函数。

最美好的祝愿。 感谢您的帮助。

Answer 1

您可以执行element.onclick= function(){}

var pageRows = document.getElementsByClassName('pageRows');
var pageRowID = "section";

var el = document.createElement('section');

el.setAttribute('id', pageRowID + pageRows.length);
el.onclick = function(){
   /*write your fn here*/
};

var row = document.getElementById('allNewRows');
row.parentNode.appendChild(el);

el.innerText = "New " + pageRows.length + " ROW!";