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 base64编码实现代码
Dec 02 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
React快速入门教程
Jan 17 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
JS实现省市县三级下拉联动
Apr 10 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
loading动画特效小结
2017/01/22 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python处理数据,存进hive表的方法
2018/07/04 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
学习心理学心得体会
2016/01/22 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
创业计划书之美容店
2019/09/16 职场文书
golang slice元素去重操作
2021/04/30 Golang
如何正确理解python装饰器
2021/06/15 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript