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. c# 创建缩略图

    /// <summary> /// 创建缩略图 /// </summary> /// <param name="srcFileName">< ...

  2. 7.29实习培训日志-Oracle题目

    总结 这周主要学习了SQL,oracle中的SQL基础,以前学习的是SQLserver的SQL,和oracle的还是有略微不同,所以重新去学习了一段时间,然后对于oracle中的各种函数有了初步了解, ...

  3. POJ 1601 拓展欧几里得算法

    学习链接:http://www.cnblogs.com/frog112111/archive/2012/08/19/2646012.html 先来学习一下什么是欧几里得算法: 欧几里得原理是:两个整数 ...

  4. 【mysql远程连库】

    mysql连接远程库: 服务器端: 1.登陆服务器端,进入命令行,windows cmd; 2.设置用户.密码让指定的IP访问:MySQL -u root -p 或安装的快捷方式进入:MySQL Co ...

  5. 【hibernate-笔记】

    //1 创建,调用空参构造 Configuration conf = new Configuration().configure(); //2 根据配置信息,创建 SessionFactory对象 S ...

  6. Spring 属性配置

    此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 随着Spring的不断发展与完善,早期它的功能可能只看做是IOC(反转控制)的容器,或者其最大的亮点为DI( ...

  7. OpenStack API映射分析

    Nova代码阅读 确定服务类型 RPC服务 WSGI服务 查询cmd目录下的对应的服务启动脚本,根据服务创建方式来判断服务类型,service.WSGIService表示WSGI服务,service. ...

  8. 微信JSApi支付---常见问题

    1.支付一直报  “get_brand_wcpay_request:false” 错误 原因: 商户平台上设置的[支付授权目录]路劲不正确,比如:支付的页面的域名是:www.xxx.com/pay/s ...

  9. Baidu - Echarts 地图实例测试,并绘制平滑圆弧路径

    百度Echarts实例地址: http://echarts.baidu.com/examples.html 同事想做一个地图,地图上的几个点通过动态的线连接起来.但是在实例里没找到类似的. 然后仔细分 ...

  10. 学习Vim的四周计划

    来源:Python程序员 ID:pythonbuluo vim具有自定义配色方案,语法高亮,linting和自动填充功能 Vim是一个以非常难学而闻名的命令行文本编辑器(有个关于Vim的笑话:问如何生 ...