在开发项目的过程中,有些需求需要用户点击添加按钮,则对应的添加一个div,且div里面有别的js效果。我们通常会用append(),after(),before()等方法来实现添加。但是发现添加后的这个div里面的元素无法再继续执行js效果,这怎么办?所以针对这个问题给大家分享下,利用时间委托来实现添加的元素可执行js效果。

我们先下面的例子就可以理解什么意思了:

[url href=链接地址]未用事件委托[/url]

[url href=链接地址]使用事件委托[/url]

事件委托(event delegation),使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到哪个是子元素的事件。

通俗的讲,事件就是onclick,onmouseover,onmouseout等就是事件。委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

举个例子:

有三个同事中午点外卖。签收外卖,有两种办法:一种是三个人在公司门口等外卖;另一种是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等外卖)。前台MM收到外卖后,她会判断收件人是谁,然后按照收件人的要求签收。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的外卖后核实并代为签收。

jq事件委托写法:

$(function(){ 
	$('body').on('click','#btn',function(){ 
		$(this).before("<div><span class="btn">点我弹窗</span></div>");
		$(".btn").on("click",funtion(){
			alert("Monkey前端博客")
		})
	}) 
});

这样就可以完成我们想要的添加元素后的元素可以继续使用js效果。以后朋友们遇到类似问题就可以用事件委托即可解决。