先来看个例子:

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. ipfs webui 管理界面

    ipfs 内置了一个webui 默认的端口是5001 访问地址 http://ip:5001/webui 环境准备 docker-compose 文件   version: "3" ...

  2. 主机-配件-接口-整机-3c-1

    standby 待机 hibernate 休眠(睡眠) power-off 关机 usb端口能给外部设备充电在低压状态(standby,hibernate,power-off),如果系统运行在batt ...

  3. 996.icu 事件后

    996.icu 事件后 雇主 更加关注效率 减少成本 分工再细化 精简人员 雇员 法律意识加强 个人权利争取 效率低者下岗 技能提高 效率提高 影响 商业社会更有效率 人力市场竞争更加激烈 国内竞争力 ...

  4. [转]Intellij IDEA快捷键

    [常规]Ctrl+Shift + Enter:语句完成“!”:否定完成:输入表达式时按 “!”键Ctrl+E:最近的文件Ctrl+Shift+E:最近更改的文件Shift+Click:可以关闭文件Ct ...

  5. mysql之 redo log

    重做日志(redo log) 前言:之前一直弄不清楚 mysql 里面 bin log 和 innodb log 文件的区别,在脑子里面一直有个疑问 binlog 日志文件已经可以用来进行数据库的日志 ...

  6. oracle之 反向键索引

    反向键索引是一种B-tree索引,它在保持列顺序的同时,物理地改变每个索引键的字节(反向键索引除了ROWID和still之外,反转每个索引列的字节).例如,如果索引键为20,如果在十六进制中存储为这个 ...

  7. webpack 中，loader、plugin 的区别

    loader 和 plugin 的主要区别: loader 用于加载某些资源文件. 因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的 ...

  8. 与左侧的 圆括号“(”(位于“e:\大二上课程课件、作业和答案\数据结构\chapter4\sqstack\sqstack\mysqstack.h(23)”)匹配之前遇到文件结束

    错误原因是“某对圆括号只打了左括号而没有右括号”,debug方法是:直接根据报错提示:“与左侧的 圆括号“(”(位于“e:\大二上课程课件.作业和答案\数据结构\chapter4\sqstack\sq ...

  9. Linux下处理文件中的^M

    由于之前爬某房地产网站的房价数据,开始没有定义好存储的位子,所以临时存储在了txt文件中.最近定义清楚数据需要存储在mongoDB中,所以我需要从原来数据中解析出来存储在mongoDB中,转存的时候在 ...

  10. MySQL 过滤数据（WHERE子句）

    WHERE子句操作符 从表products中检索prod_name,prod_price列,返回prod_price=2.5的行 mysql> SELECT  prod_name, prod_p ...