Jquery on方法绑定事件后执行多次的解决方法


Posted in Javascript onJune 02, 2016

这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on(‘click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次。

下面给出这种情况的实例:

$(function(){
  $(".add").click(function(eve){
   $(".btn-area").append("<button class='test-btn'>test button</button>");
   //$(".test-btn").off("click");
   $(".test-btn").on("click",function(){
    console.log("test button .....");
   });
  });
});

在点击add按钮的添加测试按钮,测试按钮绑定点击事件,console 台输出一句话。

执行结果如下:

Jquery on方法绑定事件后执行多次的解决方法

很明显,第一个按钮点击之后执行了5次。

遇到这种情况需要在每次绑定事件之前,对该事件解绑,也就是 $(“.test-btn”).off(“click”); ,off方法解绑。

以上这篇Jquery on方法绑定事件后执行多次的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
php+js实现倒计时功能
Jun 02 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
简单的js表格操作
Sep 24 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
js实现网页随机验证码
Oct 19 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 #Javascript
Javascript小技能总结(推荐)
Jun 02 #Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 #Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 #Javascript
深入理解jQuery之事件移除
Jun 02 #Javascript
深入理解JQuery循环绑定事件
Jun 02 #Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 #Javascript
You might like
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python 装饰器深入理解
2017/03/16 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
django之自定义软删除Model的方法
2019/08/14 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
详解django中Template语言
2020/02/22 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
请介绍一下Ant
2016/07/22 面试题
linux面试相关问题
2013/04/28 面试题
高中军训感言500字
2014/02/24 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
2016年端午节寄语
2015/12/04 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS