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

why html created on the fly not registered in DOM?

本文关键字：DOM 注册 动态 创建 html 为什么      更新时间：2023-09-26

当使用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>

现在，我有两种方法。我可以为每个按钮附加一个处理程序:

var buttonHome = document.getElementById("button-home");var buttons = buttonHome.getElementsByTagName("button");For (var I = 0;我& lt;buttons.length;我+ +){Var button = buttons[i];按钮。Onclick = function() {alet("你点击了我!");}}

现在，如果您添加或删除按钮，则必须更新处理程序。

另一个选项是在button-home上设置一个处理程序，该处理程序查看被按下的按钮。

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;);
   }
 });

现在，在委托模型中，因为在按钮的外部只有一个点击处理程序，所以我们如何添加/更改或重新排列内部的按钮并不重要。点击处理程序会知道我们做了什么。

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

http://davidwalsh.name/event-delegate

相关文章：