先来看个例子:

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. python-廖雪峰，map/reduce学习笔记

    # _*_ coding:utf-8 _*_from functools import reduce def str2int(s): digits = {'0': 0, '1': 1, '2': 2, ...

  2. [转]kafka详解

    一.入门     1.简介     Kafka is a distributed,partitioned,replicated commit logservice.它提供了类似于JMS的特性,但是在设 ...

  3. 搭建Cordova + Ionic + WebStorm环境开发Web App应用

    1. 下载并且安装Node.js(https://nodejs.org/en/) 2. 打开终端,安装cordova (如果安装失败或者卡住不动则重新安装)    sudo npm install - ...

  4. 手机开发者模型，上方显示p dx dy xv yv

    prs:当前压强 (红色的时候 表示 压强趋向稳定或达到最大压强)p:触碰点状况p:(x/y) x为当前监控的触摸点 y为当次触摸屏幕操作最大触摸点个数 你可以理解为 y是有多少根手指放过在屏幕上 x ...

  5. SQL Server孤立账户解决办法

    选择你想要的数据库. 执行 exec sp_change_users_login 'UPDATE_ONE','用户名','登录名' 假如你的登录名是:sd exec sp_change_users_l ...

  6. ubuntu 脚本执行

    1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以无"执行权限" 注:该命令通常用 ...

  7. 跟未名学Office - PPT操作：高效

    第二章. PPT操作:高效... 3 第一节 操作视图... 3 第二节 Word草稿... 4 第三节 幻灯片母版... 5 第四节 幻灯片页... 7 第五节 幻灯片排版... 8 第六节 模板. ...

  8. 黄聪：TortoiseGit(乌龟git)保存用户名密码的方法

    1.在项目文件夹右键--tortoiseGit--设置 2.编辑全局.git/config 3.加上这行代码 里面会有你先前配好的name 和email,只需在下面加一行 [credential] h ...

  9. elasticsearch 口水篇（6） Mapping 定义索引

    前面我们感觉ES就想是一个nosql数据库,支持Free Schema. 接触过Lucene.solr的同学这时可能会思考一个问题——怎么定义document中的field?store.index.a ...

  10. mongoDB oplog的说明及应用

    mongoDB oplog 说明 ts:8字节的时间戳,由4字节unix timestamp + 4字节自增计数表示.这个值很重要,在选举(如master宕机时)新primary时,会选择ts最大的那 ...