关于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", ...
随机推荐
- oracle-sql优化器
优化器optimizer Oracle 执行计划(Explain Plan) 说明 http://langgufu.iteye.com/blog/2158163 explain plan是一个dml语 ...
- WebSocket概念
WebSocket 是什么? WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 ...
- 对HTML中的文字的修饰
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第1节 常用DOS（磁盘操作系统）命令
一.打开DOS命令窗口 1)快捷键:win + r,打开命令提示符窗口: 2)左击“开始”菜单,在运行里输入cmd,按回车打开命令提示符窗口: 二.常见命令 1)文件夹操作: d:+ 回车:盘符切换 ...
- java编程调试技巧
1 多线程调试 开发过多线程应用的朋友应该有体会,有些时候,为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来的时候,可以切换到另外的线程 ...
- python + opencv + pycharm +语音生成
安装puthon 2.7.14(内置pip) pip install numpy pip install opencv-python 安装opencv 3.3.0 进入opencv example目录 ...
- Bjarne Stroustrup announces C++ Core Guidelines
This morning in his opening keynote at CppCon, Bjarne Stroustrup announced the C++ Core Guidelines ( ...
- sql server 无法用sql server身份验证
1)首先,用windows身份验证进入服务器. 2)其次找到安全性,点击进入后,找到登录名为sa,然后右击属性. 3)在属性中找到常规,然后检查下自己的账号和密码,并且在状态中将登陆状态改成启用,否则 ...
- redis 的 docker 镜像使用
redis 镜像使用: 创建容器(暴露端口:6379,使用 Redis 可视化界面工具(如:Fastoredis)连接 redis 时连接该端口): docker run -it -p 6379:63 ...
- pyspark数据准备
鸢尾花数据集 5.1,3.5,1.4,0.2,Iris-setosa 4.9,3.0,1.4,0.2,Iris-setosa 4.7,3.2,1.3,0.2,Iris-setosa 4.6,3.1,1 ...