jquery的事件委托

Question

我的button是动添加的，点击第一个的时候会应影响第二个，改成下边的body委托才可以用，这是什么原理呢，求解

Answer 1

事件发生时是会发生以上的步骤/

而事件委托是 委托给他的父级来触发来达到的效果/
！！如果好多个动态元素都用同一个父元素来做事件代理，那么后面的事件会覆盖掉前面父元素代理的事件。

Answer 2

对于jQuery1.7版本之前，动态添加的元素绑定事件可以用 live，之后版本，使用 on来绑定，直接给button绑定click事件是不起作用的。

还可以使用addEventListener()来实现事件委托，达到对动态创建的元素绑定事件的效果

Answer 3

只有第一个和最后一个有用, 中间那个其实并没有什么用.
用 on来添加事件就是事件委托, 意思就是 :

点击事件绑定在body 和 delete-monitor1上, 等你点击的时候去判断你点击的元素 id === button 的话, 就执行下面的函数. 所以delete-monitor1是不能动态加载的, 但是他的子元素可以, 而body肯定是在的. 所以能成功.

但是中间那种, 我一进页面, 先去找 delete-monitor的子元素 button, 给每个button绑定事件. 但是你的 button是动态加载的,刚进页面的时候是不存在的, 所以没有绑定成功.

我猜你的 delete-monitor button 是 delete-monitor1 的子元素, 所以第一个事件绑定影响到了第二个.

Answer 4

动态生成的元素要通过事件委托来处理，官方建议用on把事件委托在body上。 要绑定在 class 上的话，你需要在动态增加后重写绑定。

原因嘛，似乎是因为实际上是个数组，在你没有动态生成的元素之前，该数组实际上在执行该条JS语句的时候就已经完成了。（个人理解。）

Answer 5

是时候展现一波真正的技术了：委托

$(document).click(function(e){
    e=e||window.event;
    var target=e.target||e.srcElement;
    //这个target就是鼠标点击document点击后拿到的节点，$(target)
    console.log(target,target.nodeName);
});

//请把这一段代码 放入控制台 执行，在页面上点击任意节点，看输出的信息，你应该就明白了。

Answer 6

委托就像送快递。你可能不在家，委托门卫接收，再给你。 不然快递到时你不在家怎么办？
比较形象，但是不太对.
不知道你明白对象不，事件绑定在对象上，按钮就是一个对象，对象被删除又重新创建，虽然长得一样，但是绑定事件没了。