click事件的累加绑定,一次点击,执行多次

最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路

案列引自 踮起脚尖眺望6

 $("#adsCollection_tb .contentDel").on("click",function(){
    $(this).each(function(){
    var obj_address_name = $(this).parent().parent().find(".obj_address_name").html();
    var jsonDel = {
            "head": {
              "module": "object",
              "function": "del_obj"
             },
             "body":[
                   {
              "name": obj_address_name
                    }
              ]
           }
         alert("确定要删除这一条吗?");
         addrGroup.Ajax(jsonDel);
                         
    });
 });

在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定个一次点击事件,这样第二次点击就会执行两次,以此类推。如何解决累加绑定?

第一种方法

元素点击后删除,然后再动态创建一个元素,再添加点击事件。显然这个方式很麻烦。

第二种方法

使用jquery的one()方法,为元素绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次。

$("#adsCollection_tb").one("click",function(){
    alert("执行"); 
})
第三种方法

在每次绑定点击事件前先解除之前的事件绑定,再为元素绑定事件,类似于先清空,在做操作一样。但你使用bind()方法绑定时,可以用unbind()方法解除绑定。通常我们跟愿意用on()方法绑定事件,因为bind()方法已经不被推荐,那么那么就用off()方法解除事件绑定。

$("#adsCollection_tb").unbind("click").bind("click",function(){
   alert("执行"); 
});
$("#adsCollection_tb").off("click").on("click",function(){
   alert("执行"); 
});
本人通过这些方法解决了这个问题,希望可以帮到遇到同样问题的人
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法...
    踮起脚尖眺望_3阅读 4,620评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,932评论 18 139
  • 1、 jQuery 能做什么? jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如j...
    zh_yang阅读 1,422评论 6 13
  • 01 人人皆有七情六欲。七情指的是【喜怒哀惧爱恶欲】,今天咱们来说说愤怒。 在《打翻的牛奶:如何愤怒不伤人》一书中...
    朱子先生的摄影思维阅读 511评论 2 10
  • 首先,我们来看一下微软对架构的官方定义: 架构(Schema)是形成单个命名空间的数据库实体的集合。命名空间是一个...
    cebdba阅读 4,164评论 0 1