先来看个例子:

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. Singer 开源便捷的ETL 工具

    singer 是一个强大,灵活的etl 工具,我们可以方便的提取web api,file,queue,基本上各种你可以想到的 数据源. singer 有一套自己的数据处理规范, taps, targe ...

  2. Bubble Sort冒泡排序

    冒泡排序是一种简单的排序算法. 它每次重复的访问过要排序的数列, 一次比较两个元素, 如果他们的顺错误, 就把他们交换过来. 下面这种图很清晰的解释了什么是冒泡算法. 具体算法描述如下: 1. 比较相 ...

  3. maven的profile

    https://elim.iteye.com/blog/1900568 简介:配置不同环境要使用的profile,再idea操作画面可以选

  4. Intellj（IDEA）创建java webapp

    1. 创建工程 2. 创建Java文件 并且将java文件夹将设置为Sources Root 3. 创建test文件夹,并且在test文件夹下面创建java文件夹 将test下面的java文件夹标记为 ...

  5. VS未能正确加载包

    这个方法同样适用于多个版本的VS 首先关闭VS进这里:C:\Users\用户名\AppData\Roaming\Microsoft\VisualStudio\11.0(2012是11.0,根据你的VS ...

  6. Feign 使用入门

    Feign 的目的是简化 Web Service 客户端的开发,在使用 Feign 时,使用注解来修饰接口,被注解修饰的接口具有访问 Web Service 的能力,包括 Feign 自带的注解,也支 ...

  7. Release Notes for XE5

    开发者之前说明 http://docwiki.embarcadero.com/RADStudio/XE5/en/Release_Notes_for_XE5

  8. STL序列式容器学习总结

    STL序列式容器学习总结 参考资料:<STL源码剖析> 参考网址: Vector: http://www.cnblogs.com/zhonghuasong/p/5975979.html L ...

  9. 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  10. NIO基本操作

    NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题 NIO主要有三大核心部分:Channel(通道),Buffer(缓冲区), Selector(选择器) Channel(通道) ...