先来看个例子:

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 学习九 运行&&开发taps、targets (四 开发target)

    singer 的target 需要从stdin 的行数据,同时处理schema.record.state 消息 指南 schema 需要进行关联stream records 数据的校验 一旦Targe ...

  2. windows 8，关闭随意窗体都提示“已停止工作”的解决的方法

           电脑用的好好的,突然出现了关闭随意窗体都提示"已停止工作",每次都是这样.想想也就是偶尔优化一下,近期也没有改动过什么系统设置呀,突然想到昨晚JLink_V8固件丢失 ...

  3. style-loader、css-loader、mini-css-extract-plugin 区别

    项目 区别 css-loader 处理 css 文件 style-loader 把 js 中 import 导入的样式文件代码,打包到 js 文件中,运行 js 文件时,将样式自动插入到<sty ...

  4. VNC Viewer连接打开remote display的VMware虚拟机出现闪退

    只需修改vnc option里面Advanced-->expert-->ColourLevel的值为“rgb222” or “full”即可. 说明:rgb111--8 colours,r ...

  5. ajaxFileupload 多文件上传

    ajaxFileupload 多文件上传 修改前的代码: var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(o ...

  6. JAVA高并发系列

    高并发Java(1):前言 高并发Java(2):多线程基础 高并发Java(3):Java内存模型和线程安全 高并发Java(4):无锁 高并发Java(5):JDK并发包1 高并发Java(6): ...

  7. 文件上传失败 -nginx报错 client intended to send too large body: 1331696 bytes

    location / { root /data/fastdfs/data; include gzip.conf; ngx_fastdfs_module; client_max_body_size 10 ...

  8. Php文件上传类class.upload.php

    简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮助你快速的给自己的网站集成上传文件功能.不仅如此,此分类还有一些列的处理功能,可以对上传的文件或者本地的文件进行处 ...

  9. 2017.11.13 flex 布局相关问题

    一.今日任务:城市体验平台小程序的开发(由于数据还未完善,今天主要是 UI 布局的开发) 二.所遇问题 1. flex 布局问题: html: <view class="flex-sp ...

  10. java集合之List源码解析

    List是java重要的数据结构之一,我们经常接触到的有ArrayList.Vector和LinkedList三种,他们都继承来自java.util.Collection接口,类图如下 接下来,我们对 ...