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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
JavaScript实现密码强度实时验证
Mar 18 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
一些有关检查数据的JS代码
2006/09/07 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
从0开始学Vue
2016/10/27 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
Python连接phoenix的方法示例
2017/09/29 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Araks官网:纽约内衣品牌
2020/10/15 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
销售会计工作职责
2013/12/02 职场文书
行政主管职责范本
2014/03/07 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2016中秋节问候语
2015/11/11 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python