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

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

如何解决累加绑定?具体方法有三种:

第一种方法是:元素点击后删除,然后再动态创建一个元素,再添加点击事件。(该方法比较麻烦)

第二种方法是:使用jQuery的one()方法,为元素绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次,代码如下:

$("#saveBtn").one("click",function(){});

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

$("#saveBtn").unbind("click").bind("click",function(){});
$("#saveBtn").off("click").on("click",function(){});

click事件的累加绑定的更多相关文章

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

    最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求.完成后看效果,第一次点击没有问题.再一次点击后 ...

  2. jq和js中click 事件的几种方式总结和click事件的累加问题解决办法

     1:常见的三种绑定click事件: 第一种:$("#click").click(function(){ alert("Hello World  click") ...

  3. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  4. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  5. jQuery中click事件多次触发解决方案

    jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...

  6. click事件多次触发 jQuery

    jQuery 中 click事件会累计绑定 例如下列代码: aNode.click(function(){ bNode.click(function(){ console.log('haha'); } ...

  7. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  8. 关于移动端click事件绑定的一个细节

    click是最常见的点击事件,但是对于移动终端,比如手机,一般都是以touch事件代替的,而click事件在手机也是生效的,只是会有1-2秒左右的延迟,那么当你想要用click而非touch事件的时候 ...

  9. 动态添加DOM时,绑定的click事件会重复执行

    最近因为业务需求,需要重写window的alert和confirm弹窗,但是每次显示的提示按钮不相同,所有每次打开的弹窗都需要重写生成,但是对于相同的按钮会保留上次创建时的click事件,所以当你创建 ...

随机推荐

  1. 9、par画图参数

    转载:http://blog.sina.com.cn/s/blog_8f5b2a2e0102v0tf.html 1. 函数par()的使用格式如下: par(..., no.readonly = FA ...

  2. 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList问题

    在spring + springmvc + mybatis框架中,我们配置接口对外返回json格式,但是报如下错误: 24-Oct-2017 17:42:23.495 严重 [http-nio-808 ...

  3. scrapy-redis源码解读之发送POST请求

    1 引言 这段时间在研究美团爬虫,用的是scrapy-redis分布式爬虫框架,奈何scrapy-redis与scrapy框架不同,默认只发送GET请求,换句话说,不能直接发送POST请求,而美团的数 ...

  4. BZOJ 1858【线段树】

    题意:  0 a b 把 [a, b] 区间内的所有数全变成0  1 a b 把 [a, b] 区间内的所有数全变成1  2 a b 把 [a,b] 区间内的所有数全部取反  3 a b 询问 [a, ...

  5. smix到底是个啥?Perl的正则表达式匹配模式

    最近在研究一个perl项目,临时学习了一下perl语法,强行看项目源码.因为总是见到各种正则表达式后面接smxi之类,虽然知道是匹配模式,但脑子里毫无概念.所以特地去学习了一下. 以上为背景. Per ...

  6. 启动windows .net 3.5 功能

    近期给window 2008 版本安装loadrunner ,发现还需要用户自己打开windows 的 .net 3.5 功能,所以在这里记录一下步骤 激活

  7. POJ2151-Check the difficulty of problems

    题目链接:点击打开链接 Check the difficulty of problems Time Limit: 2000MS   Memory Limit: 65536K Total Submiss ...

  8. iOS 限制TextField输入长度

    1 #import "MyInfoEditTableViewCell.h" @interface MyInfoEditTableViewCell()<UITextFieldD ...

  9. vuex和localStorage/sessionStorage 区别

    1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地 2.应用场景:vuex用于组件之间的传值,(响应式的),localstorage则主要用于不同页面之间的传值(其 ...

  10. python模块之time方法详细介绍

    >>> import time >>> dir(time) ['_STRUCT_TM_ITEMS', '__doc__', '__loader__', '__nam ...