Javascript 为什么动态创建的html没有在DOM中注册?

Javascript 为什么动态创建的html没有在DOM中注册?,javascript,html,dom,Javascript,Html,Dom,使用jquery或javascript动态创建html元素时,事件处理程序不会附加到该元素。 因此,我们通常将事件附加到其父级或非动态创建的文档 然后文档如何将事件委托给新创建的元素。? 请澄清此疑问。您必须了解委派是如何工作的,以及委派与分配给元素有何区别 假设我有一个有六个按钮的DOM <div id="button-home"> <button value="1">Button</button> <button value="2">B

使用jquery或javascript动态创建html元素时,事件处理程序不会附加到该元素。 因此,我们通常将事件附加到其父级或非动态创建的文档 然后文档如何将事件委托给新创建的元素。?
请澄清此疑问。

您必须了解委派是如何工作的,以及委派与分配给元素有何区别

假设我有一个有六个按钮的DOM

<div id="button-home">
  <button value="1">Button</button>
  <button value="2">Button</button>
  <button value="3">Button</button>
  <button value="4">Button</button>
  <button value="5">Button</button>
  <button value="6">Button</button>
</div>
现在,在委托模型中,因为按钮外部只有一个单击处理程序,所以我们如何添加/更改或重新排列按钮内部并不重要。单击处理程序将了解我们做了什么

这里有更好的代码示例和解释:


这台电脑很聪明,它知道你什么时候加东西,什么时候拿走。请发一些代码。
document.getElementById("button-home").addEventListener("click",function(e) {
 // e.target is the clicked element! 


  if(e.target && e.target.nodeName === "button") { 

    console.log("You clicked on button value: " + target.value;);
   }
 });