当使用 jquery 或 javascript 即时创建 html 元素时,事件处理程序不会附加到该元素。 所以我们通常将事件附加到它的父级或不是动态创建的文档 那么文档如何将事件委托(delegate)给新创建的元素。? 请解开这个疑惑。
最佳答案
您必须了解委托(delegate)的工作原理以及它与分配给元素的区别。
假设,我有一个包含六个按钮的 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("按钮"); 对于 (var i = 0; i < buttons.length; i++) { var 按钮 = 按钮[i]; button.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;);
}
});
现在,在委托(delegate)模型中,因为按钮外部只有一个点击处理程序,所以我们如何添加/更改或重新排列内部按钮并不重要。点击处理程序会弄清楚我们做了什么。
这里有更好的代码示例和解释:
关于javascript - 为什么动态创建的 html 没有在 DOM 中注册?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23901924/