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 相关文章推荐
jquery采用oop模式class类的使用示例
Jan 22 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
vue v-on监听事件详解
May 17 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP中each与list用法分析
2016/01/08 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
javascript控制台详解
2015/06/25 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
Vue 去除路径中的#号
2018/04/19 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
详解如何运行vue项目
2019/04/15 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
python机器学习之神经网络实现
2018/10/13 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Django单元测试工具test client使用详解
2019/08/02 Python
详解python UDP 编程
2020/08/24 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
好邻里事迹材料
2014/01/16 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
工程造价专业求职信
2014/07/17 职场文书
八达岭长城导游词
2015/01/30 职场文书
新教师教学工作总结
2015/08/14 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
乔迁新居祝福语
2019/11/04 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server