如何在创建 DOM 后创建的元素上添加功能？答案

【问题标题】：How to add a function on an element that was made after DOM creation?如何在创建 DOM 后创建的元素上添加功能？
【发布时间】：2015-09-19 12:14:40
【问题描述】：

我有一个函数可以创建一个具有唯一 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”的元素，我想要一个在我单击此元素时起作用的函数。

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

【问题讨论】：

您可以使用事件委托将点击事件添加到父元素并检查 e.target 是否为section 元素，或者您可以将类添加到该元素并检查该类。
你能提供一个示例代码片段吗？

标签： javascript html function element

【解决方案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!";

【讨论】：

酷。如果您认为这是一个可以接受的答案，请投票并接受
我还不能投票，但我接受了你的回答！你才是真正的 MVP :)

【解决方案2】：

您可以使用事件委托：

var row = document.getElementById('allNewRows');
row.parentNode.onclick = function(e) {
   if (e.target.nodeName.toLowerCase()  == 'select') {
       //click on target select element
   }
};

【讨论】：

【解决方案3】：

下面的sn-p有两个部分。第一段代码允许你在文档中添加一堆不同文本的元素。

第二部分显示您单击的元素的文本。

您会注意到单击事件处理程序只是分配给添加新元素的父元素。没有明确的单击事件处理程序绑定到新元素。

我喜欢使用 addEventListener，因为我认为为特定目标添加监听器比通过直接设置“onclick”来覆盖任何其他事件监听器要好，但这是见仁见智的问题。

// Only run this code when the DOM is loaded, so we can be sure the proper elements exist.
window.addEventListener('DOMContentLoaded', function(){

  // The code to add an element when the add button was clicked.
  document.getElementById('add').addEventListener('click', function() {
    var element = document.createElement('div');
    element.innerText = document.getElementById('text').value;
    element.className = 'clickableElement';
    document.getElementById('elements').appendChild(element);
  });
   
  // Click event handler for the 'elements' div and everything in it.
  document.getElementById('elements').addEventListener('click', function(event) {
    var target = event.target; // The element that was clicked
    
    // Check if the clicked element is indeed the right one.
    if (target.classList.contains('clickableElement')) {
      alert(target.innerText);
    }
  });
  
})

<input id="text" value="test"><button id="add">add</button>
<div id="elements"></div>

【讨论】：