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在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Django  ORM 练习题及答案
2019/07/19 Python
python+pygame实现坦克大战
2019/09/10 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Java基础知识面试要点
2016/07/29 面试题
党员创先争优承诺书
2014/03/26 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书