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 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
Node.js使用Angular简单示例
May 11 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Element实现动态表格的示例代码
Aug 02 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中include()与require()的区别说明
2010/03/10 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
mouse_on_title.js
2006/08/25 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
python魔法方法-自定义序列详解
2016/07/21 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python select.select模块通信全过程解析
2017/09/20 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
车辆安全检查制度
2014/01/12 职场文书
户外活动总结范文
2014/04/30 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
小学班长竞选稿
2015/11/20 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书