先来看个例子:

html:

  1.  <body>
  2.      <button id="btn">按钮</button>
  3.      <button id="btn1">按钮1</button>
  4.  </body>

javascript:

  1.  <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
  2.  <script>
  3.  $('#btn').click(function(){
  4.      alert(1)
  5.      $('#btn1').click(function(){
  6.          alert(2);
  7.      })
  8.  })
  9.  </script>

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

  1.  <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
  2.  <script>
  3.  $('#btn').click(function(){
  4.      alert(1)
  5.      $('#btn1').off('click').click(function(){
  6.          alert(2);
  7.      })
  8.  })
  9.  </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. Survival Shooter 学习

    using UnityEngine; using System.Collections; namespace CompleteProject { /// <summary> /// 摄像机 ...

  2. DevExpress Cpicturebox或者Dev控件 PictureEdit 按比例的缩放加载图片

    方法一:     如果要加载的图片的长宽比不是太过失衡, 1.可以改变picturebox的SizeMode属性为 PictureBoxSizeMode.StretchImage, 2.或者Dev控件 ...

  3. mysql-sql语言参考

    字段去重查询 select distinct style from music 批量修改某字段 update music set style = "ost"  where styl ...

  4. mysql——创建索引、修改索引、删除索引的命令语句

    查看表中已经存在 index:show index from table_name; 创建和删除索引索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER ...

  5. mysql全备和增量备份以及恢复过程（percona工具）

    实验环境 系统环境,内核版本和xtrabackup工具版本 [root@linux-node1 mysql]# cat /etc/redhat-release CentOS Linux release ...

  6. Lambda 表达式 是 个 好东东

    Lambda 表达式 是 个 好东东 首先,通过 Lambda 表达式 + 动态语言特性 dynamic , C# 已经 可以 实现 函数式 编程 了 其次, 利用 Lambda, 可以 实现 AOP ...

  7. IntelliJ IDEA使用心得

    前言:我原来一直使用的是Eclipse,但是发现有的教程上使用的是Intellij这个IDE,而且我发现Eclipse在Web编程上特别是页面上的自动补全上确实有些不足,而且Intellij这个软件的 ...

  8. ES9新特性

    这篇文章主要介绍ES2018(ES9)的新特性, 以及使用方法 JS是一门跨平台的语言, ES6也就是ECMAScript 2015 花费了5年的时间敲定, 是一次非常大的改版, 之后每年都有一个小版 ...

  9. 自定义flume的hbase sink 的序列化程序

    package com.hello.hbase; import java.nio.charset.Charset; import java.text.SimpleDateFormat; import ...

  10. F5负载均衡原理

    一. 负载均衡技术 负载均衡技术在现有网络结构之上提供了一种廉价.有效.透明的方法,来扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性. 1.负载均衡发生的流程图 ...