我的github(PS:希望star):https://github.com/thWinterSun/v-admin

  最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求。完成后看效果,第一次点击没有问题。再一次点击后发现发送了两次请求,后面再点击发现请求的数量越来越多。这时我初步判断可能是元素有多个或是多次调用了方法,但找了一遍,发现只为一个元素绑定了事件,且只调用了一次。后来通过查资料才知道是点击事件被累加绑定了!那到底什么是累加绑定呢?什么时候会发生累加绑定?累加绑定后该如何解决呢?下面我就通过这三个问题来说一下。

  

 $("#adsCollection_tb .contentDel").on("click",function(){
  $(this).each(function(){
3    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("执行");
});

  

click事件的累加绑定,绑定一次点击事件,执行多次的更多相关文章

  1. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

  2. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  3. jQuery on()方法绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  4. jQuery on()方法绑定动态元素的点击事件实例代码浅析

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  5. Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件

    <div>1</div> <div>2</div> <div>3</div> <div>4</div> ...

  6. echarts 取消图例上的点击事件和图表上鼠标滑过点击事件

    备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : {         trigger: 'item',      show:false,      ...

  7. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  8. jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.

    $("#diva").click(function(){ $("#divb").unbind("click").click(function ...

  9. 通过jQuery给<li>绑定点击事件

    背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){  commonAjaxCall ...

随机推荐

  1. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  2. C#异步编程(一)

    异步编程简介 前言 本人学习.Net两年有余,是第一次写博客,虽然写的很认真,当毕竟是第一次,肯定会有很多不足之处, 希望大家照顾照顾新人,有错误之处可以指出来,我会虚心接受的. 何谓异步 与同步相对 ...

  3. NYOJ 1007

    在博客NYOJ 998 中已经写过计算欧拉函数的三种方法,这里不再赘述. 本题也是对欧拉函数的应用的考查,不过考查了另外一个数论基本定理:如何用欧拉函数求小于n且与n互质所有的正整数的和. 记eule ...

  4. fiddler发送post请求

    1.指定为 post 请求,输入 url Content-Type: application/x-www-form-urlencoded;charset=utf-8 request body中的参数格 ...

  5. SignalR SelfHost实时消息,集成到web中,实现服务器消息推送

    先前用过两次SignalR,但是中途有段时间没弄了,今天重新弄,发现已经忘得差不多了,做个笔记! 首先创建一个控制台项目Nuget添加引用联机搜索:Microsoft.AspNet.SignalR.S ...

  6. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. CSS——关于z-index及层叠上下文(stacking context)

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  8. [开发笔记]GCC 分支预测优化

    #define likely(x) __builtin_expect(!!(x),1)#define unlikely(x) __builtin_expect(!!(x),0) 用于优化在做分支判断的 ...

  9. pt-heartbeat

    pt-heartbeat是用来监测主从延迟的情况的,众所周知,传统的通过show slave status\G命令中的Seconds_Behind_Master值来判断主从延迟并不靠谱. pt-hea ...

  10. iOS 委托与文本输入(内容根据iOS编程编写)

    文本框(UITextField) 本章节继续编辑 JXHypnoNerd .文件地址 . 首先我们继续编辑  JXHypnosisViewController.m 修改  loadView 方法,向  ...