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

Question

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

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

快速示例：

1) 我点击一个按钮 "Create element";

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

您可以使用事件委托：

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

Answer 2

你可以做到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!";

Answer 3

下面的代码片段分为两部分。第一段代码允许您向文档中添加一堆具有不同文本的元素。

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

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

我喜欢使用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>

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

How to add a function on an element that was made after DOM creation?

html

javascript

element

function