jquery中click点击事件嵌套后多次触发的解决方案

来源：互联网发布：新手怎么做淘宝分销编辑：程序博客网时间：2024/06/05 18:32

首先讲讲我遇到这个问题的时候，我最开始想到的是阻止事件冒泡，想了一下好像没有什么关系的，最后决定还是动手做做看，放到项目中试了试确实是没有什么关系的，傻眼了怎么办，来讲讲我的亲身体验吧！

产生此种小姑的原因：jQuery中的click事件会累计绑定，所以我们可以在下次点击前先解绑；

1.一个接单的例子

<!DOCTYPE html><html><head><title></title></head><style type="text/css">#box{width: 100px;height: 100px;border: 1px solid red; }#div{width: 50px;height: 50px;border: 1px solid green; margin-left: 25px;margin-top: 25px;}</style><body><div id="box"><div id="div"></div></div><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript"> $("#box").click(function(){         $("#div").unbind("click").click(function(){          alert("内层div");        }); }); </script></body></html>

这个例子很简单，直接在下次下次点击前先解绑即可；但是问题又来了，如果是动态加载的dom的节点上绑定点击事件呢，我们一般解决动态加载也绑定上点解事件一般会用到事件委托，把点击委托到一个不会变的的父级上；在un-click_in里面动态加载数据，让数据也具有点击事件；

比如

在说说解绑的事,在一个比较大的项目中会存在很多的类似的事件委托和点击嵌套，如果要都委托到一个div上，一旦下面的事件解绑，那么原来的其他绑定事件就不复存在，所以我上面连写三个div就是解决这个问题的，可以把不同的点击事件委托到不同的div上就可，如下图。

到这里已经完美解决了；

阅读全文

0 0