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. 【PHP】composer 常用命令

  2. MQTT结构分析

    MQTT,是: 轻量级的消息订阅和发布(publish/subscribe)协议 建立在TCP/IP协议之上 IoT,internet of things,物联网,MQTT在这方面应用较多. 官方网站 ...

  3. fsck修复系统断电或非正常关机导致的系统磁盘问题

    问题描述: unexpected inconsistency; run fask mannally. (i.e., without -a or -p options) fsck repaire man ...

  4. redis系列:主从复制

    1 简介 这篇文章主要讲述Redis的主从复制功能.会依次从环境搭建.功能测试和原理分析几个方面进行介绍. 2 准备工作 服务器架构图如下 启动主服务器101,使用info replication命令 ...

  5. 关于layui弹出层的使用

    Jquery必须大于1.83 layui必须是all,否则不显示 <script src="../js/jquery-1.8.3.min.js"></script ...

  6. LVM使用

    LVM框架 LVM实验环境准备 创建一个128MB的文件模拟磁盘 [centos@centos lvm]$ dd if=/dev/zero of=./disk.img count=128 bs=1MB ...

  7. Java 课上的语录

    Java 课上的语录 在用系统类库的类的时候啊,你是不是充分的理解这个系统类库的类.比如这个 ArrayList 你是不是知道它里面有这样那样这样那样的函数,能够帮你做各种各样的事情.很重要,你不知道 ...

  8. laravel 常见操作

    1.url()

  9. oracle分页计算公式

    //page是页数,rows是显示行数 int page=2; int rows=5; List<Articles> list=a.select(page*rows+1,(page-1)* ...

  10. Java8 使用 stream().map()提取List对象的某一列值及排重

    List对象类(StudentInfo) public class StudentInfo implements Comparable<StudentInfo> { //名称 privat ...