关于jQuery点击事件叠加问题
先来看个例子:
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点击事件叠加问题的更多相关文章
- jquery on绑定事件叠加解决方法
jquery on绑定事件叠加解决方法 代码如下 <pre> $('.maoqiu').each(function () { var is_bind = $(this).attr('is_ ...
- Jquery 点击事件重复获取叠加 （一）
用jquery添加绑定事件 添加多少次 点击的时候就触发多少次 如果想解决这个问题 就在点击函数里先用 $(对象).off("click") 取消上一次的点击事件 上码: $(&q ...
- jQuery点击事件绑定onClick和on()
一.静态绑定 (1)onclick方法 jsp代码 <button href="javascript:;" class="weui_btn weui_btn_min ...
- jquery点击事件失效原因和解决办法
在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候 例如:给demo里添加li元素给li绑定点击事件 $("#demo").appen ...
- jquery点击事件后增加克隆的标签,并改变克隆的属性加入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery点击事件出发顺序
鼠标点击触发事件执行顺序: mouse down -> mouse up -> click 键盘点击出发事件执行顺序: 点击后马上抬起:key down -> key press - ...
- jquery 点击事件
bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 click() 触 ...
- jquery 点击事件切换样式
$('#FatherName').on('click', '.ClassName', function(e){ $('.ClassName').removeClass('active'); $(thi ...
- jquery点击事件
$("#hoetelNameSelect").click( $.post("${ctx}/meeting/restaurant/queryHotelName", ...
随机推荐
- graalvm 简单试用
安装 地址 http://www.graalvm.org/downloads/ 配置环境变量 linux: export PATH=/path/to/graalvm/bin:$PATH mac: ...
- 将 vue 挂在 window 对象上，实现能调用 elementUI 的组件
html 部分: <div id="sample"> </div> js 部分(将js代码放在 body 的 onload事件中: <body onl ...
- Zookeeper常用操作命令create，set，delete
一.zk特性的session的基本原理 1.客户端与服务端之间的连接存在会话 2.每个会话都可以设置一个超时时间 3.心跳结束,session则过期 4.session过期,则临时节点znode会被抛 ...
- operator笔记
# operator.itemgetter(*items) # 获取item >>> from operator import itemgetter # list使用下标进行返回 & ...
- Request.QueryString()和Request()和Request.Form();
一. querystring的用法及原理 当页面上的 FORM以 GET方式向页面发送请求数据 (如数据含有不安全字符,则浏览器先将其转换成 16进制的字符再传送,如空格被转成 %20)时, WEB ...
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
引用自:http://blog.csdn.net/qqhjqs/article/details/41683099?utm_source=tuicool&utm_medium=referral ...
- Java模板引擎之Freemarker
Freemarker定义: 一款模板引擎 Freemarker是一个web图层组件不是web框架,解析服务端数据到页面 小例子: <#list 集合 as item> list标签对集合进 ...
- Vivado使用技巧(1)
Vivado使用技巧 (1) 1. 2.复位准则: 3. 4. 5. 6. 7. 8.
- innobackupex per table
#innobackupex export tableinnobackupex --defaults-file=/etc/my.cnf --sock=/data/3306/mysql_3306.sock ...
- Delphi 的各种错 误 信 息（中英文）
******************************* * 编 译 错 误 信 息 * ******************************* ';' not allowed befo ...