JavaScript动态加载重复绑定问题


Posted in Javascript onApril 01, 2018

前言

在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图:

JavaScript动态加载重复绑定问题

但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除。

经过排查,终于发现问题所在。

正文

当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等。还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,已经绑定了n次删除事件,所以在删除第n条数据时,也就会提示n次是否确认删除。

既然找到了错误的原因,就好解决了,在绑定删除事件前,只要把上次绑定的事件解绑就可以了。

代码:

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

总结

以上所述是小编给大家介绍的JavaScript动态加载重复绑定问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会

及时回复大家的!

Javascript 相关文章推荐
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 #Javascript
Vue.js进阶知识点总结
Apr 01 #Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 #Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 #Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 #Javascript
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python continue语句用法实例
2014/03/11 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
用python解压分析jar包实例
2020/01/16 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
自考自我鉴定范文
2013/10/30 职场文书
副总经理工作职责
2013/11/28 职场文书
2014村务公开实施方案
2014/02/25 职场文书
食品安全承诺书
2014/05/22 职场文书
新农村建设典型材料
2014/05/31 职场文书
施工单位安全责任书
2014/07/24 职场文书
给校长的建议书范文
2015/09/14 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
英语教学课后反思
2016/02/15 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
浅谈Redis缓冲区机制
2022/06/05 Redis