【踩坑记2】动态元素上的多个事件绑定

上周写了个关于事件委托的踩坑记，今天又遇到个稍微不一样的，发现了更优的解决方案。建议先去看一下上次的前情介绍，【踩坑记】同一个div绑定了多个委托事件

今天遇到的和之前的稍有不同，我再举个栗子来说明。

一 场景介绍

有一个list列表，list的数据是从后台拿到后动态拼接上的。然后点击list的每个item时，item会出现两个按钮，一个编辑，一个删除。

因为list都是动态拼接的，所以delete和edit的事件刚开始是用事件委托实现的。

但是因为他们都委托在同样的父类ul上，所以，后面声明的事件总是会覆盖掉前面的事件，也就是delete和edit只有一个在起作用！

$("#ul").off("tap").on("tap","#delete",function(){
     console.log("delete event");
})
$("#ul").off("tap").on("tap","#edit",function(){
     console.log("edit event");
})

那怎么办呢，这两个事件是同时初始化的，总会有一个会覆盖掉另一个，原因在上篇踩坑记中已经说过。

二 解决方法

接下来，看看解决方法。

function renderList(){
  //some render operate
  addDeleteEvent();
  addEditEvent();

}

function addDeleteEvent(){
  $("#delete").off("tap").on("tap",function(){
	console.log("delete event");		
  
  })
}

function addEditEvent(){
  $("#edit").off("tap").on("tap",function(){
	console.log("edit event");		
  
  })
}

在上面的解决方法中，我们可以把初始化事件封装到方法里，在renderList成功之后再初始化delete和edit的事件，因为这时候dom已经添加完了，所以可以不使用事件委托的写法，如果不用事件委托，也就不存在上面的同一个父元素挂载多个子元素的事件委托咯，机智不机智~

以上就是新探索的解决方法，后续有新方法还会补充的哒。

就酱紫，债见。