先来看个例子:

html:

 <body>

     <button id="btn">按钮</button>

     <button id="btn1">按钮1</button>

 </body>

javascript:

 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>

 <script>

 $('#btn').click(function(){

     alert(1)

     $('#btn1').click(function(){

         alert(2);

     })

 })

 </script>

点击按钮#btn两次会弹出两次1,再点击1次#btn1却弹出两次2,这就是jQuery中的事件叠加问题,下面说解决方案

 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>

 <script>

 $('#btn').click(function(){

     alert(1)

     $('#btn1').off('click').click(function(){

         alert(2);

     })

 })

 </script>

这样你点击#btn1时就只弹出一次2,不管你#btn点击了多少次,再点击#btn1时就只会得到最近的绑定在#btn1身上的点击事件,之前的都是解绑了

致敬我遇到的坑,从此愿江湖无此坑.

关于jQuery点击事件叠加问题的更多相关文章

  1. jquery on绑定事件叠加解决方法

    jquery on绑定事件叠加解决方法 代码如下 <pre> $('.maoqiu').each(function () { var is_bind = $(this).attr('is_ ...

  2. Jquery 点击事件重复获取叠加 （一）

    用jquery添加绑定事件 添加多少次 点击的时候就触发多少次 如果想解决这个问题 就在点击函数里先用 $(对象).off("click") 取消上一次的点击事件 上码: $(&q ...

  3. jQuery点击事件绑定onClick和on()

    一.静态绑定 (1)onclick方法 jsp代码 <button href="javascript:;" class="weui_btn weui_btn_min ...

  4. jquery点击事件失效原因和解决办法

    在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候 例如:给demo里添加li元素给li绑定点击事件 $("#demo").appen ...

  5. jquery点击事件后增加克隆的标签,并改变克隆的属性加入

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Jquery点击事件出发顺序

    鼠标点击触发事件执行顺序: mouse down -> mouse up -> click 键盘点击出发事件执行顺序: 点击后马上抬起:key down -> key press - ...

  7. jquery 点击事件

    bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 click() 触 ...

  8. jquery 点击事件切换样式

    $('#FatherName').on('click', '.ClassName', function(e){ $('.ClassName').removeClass('active'); $(thi ...

  9. jquery点击事件

    $("#hoetelNameSelect").click( $.post("${ctx}/meeting/restaurant/queryHotelName", ...

随机推荐

  1. 03C++语言对C的增强——实用性、变量检测、struct类型、C++中所有变量和函数都必须有类型、bool类型、三目运算符

    1.“实用性”增强 C语言中的变量都必须在作用域开始的位置定义,C++中更强调语言的“实用性”,所有的变量都可以在需要使用时再定义. 2.C++对c语言register的增强 register关键字 ...

  2. HDOJ 1297 Children’s Queue

    版权声明:来自: 码代码的猿猿的AC之路 http://blog.csdn.net/ck_boss https://blog.csdn.net/u012797220/article/details/3 ...

  3. git add -A /git add -u/git add .的用法

    git的指令详解 在git中有好多的指令,但是今天这几个指令就很容易忘记而且还容易混淆 git add -u <==> git add –update 提交所有被删除和修改的文件到数据暂存 ...

  4. 使用.pth文件扩展python环境路径

    使用.pth文件扩展python环境路径 有时候我们不希望把一个库放到 site-packages 下面,而是更愿意把它保留在原始的工程目录中,方便管理和维护.那么怎么能让 Python 运行环境找到 ...

  5. Spring整合Hibernate（转）

    概述 Spring整合Hibernate有什么好处? 1.由IOC容器来管理Hibernate的SessionFactory 2.让Hibernate使用上Spring的声明式事务 整合步骤 整合前准 ...

  6. Azkaban介绍+安装部署+实战案例

    Azkaban介绍 什么是azkaban?1.工作流的作业调度系统2.通过k.v指令写法描述工作流节点3.可以通过web界面去管理工作流 Azkaban安装部署 2.3.1 准备工作 Azkaban ...

  7. C# MD5位加密

    /// <summary> /// 方法一:通过使用 new 运算符创建对象 /// </summary> /// <param name="strSource ...

  8. centos7 tomcat自启动

    第一步: vim /lib/systemd/system/tomcat.service [Unit] Description=tomcat After=network.target [Service] ...

  9. Kafka Stream

    Kafka Stream是Apache Kafka从0.10版本引入的一个新Feature(当前:1.0.0-rc0,参见:https://github.com/apache/kafka/releas ...

  10. CentOS 7 firewalld vsftpd开放端口

    开放FTP端口的方法: 暂时开放 ftp 服务 firewall-cmd --add-service=ftp 1 永久开放 ftp 服务 firewall-cmd --add-service=ftp ...