关于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", ...
随机推荐
- sqler sql 转rest api 授权处理
我们可以使用内置的authorizer 以及js 脚本,方便的进行api 接口的授权处理 说明: 这个是2.0 的功能,注意版本的使用 参考格式 addpost { authorizer = & ...
- DevExpress DateEdit控件选择精确到秒
先看看下面的效果图: 设置以下属性 dateEdit1.Properties.VistaDisplayMode = DevExpress.Utils.DefaultBoolean.True; date ...
- docker 常见系统镜像
镜像选择 alpine:3.7 (首选) debian:stretch-slim (次选) 常见系统镜像大小对比 REPOSITORY TAG IMAGE ID CREATED SIZE fedora ...
- HttpServletResponse和HttpServletRequest
1.相关的接口 HttpServletRequest HttpServletRequest接口最常用的方法就是获得请求中的参数,这些参数一般是客户端表单中的数据.同时,HttpServletReq ...
- Spring Cloud Eureka Server使用（注册中心）
一.Spring Cloud Eureka 基于Netflix Eureka做了二次封装 由两个组件组成 Eureka Server 注册中心, 供服务注册的服务器 Eureka Client 服务注 ...
- 【转】解决ubuntu13.10下，无法双击运行脚本文件
解决ubuntu13.10下,无法双击运行脚本文件 转自:http://www.aichengxu.com/other/975350.htm 首先,必须先设定好脚本的运行方法,当然如果只是she ...
- RedHat7安装vmware虚拟机启动报错
提示错误如下: Kernel Headers for version 3.10.0-229.14.1.el7.x86_64 were not found.If you.... 安装kernel dev ...
- ionic 监听页面滚动，点击停止滚动
类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...
- python re 实例
#!/usr/bin/env python#_*_coding:utf-8_*_ import reimport timeimport jsonimport MySQLdbimport context ...
- RichEdit文字背景色的处理
uses RichEdit; procedure RichEditSetBackColor( // 设置RichEdit文字背景色 mRichEdit: TRichEdit; // Rich编辑框 m ...