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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 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
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python转码问题的解决方法
2008/10/07 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python使用configparser库读取配置文件
2020/02/22 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python中封包建立过程实例
2021/02/18 Python
初一体育教学反思
2014/01/29 职场文书
银行工作检查书范文
2014/01/31 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
学生评语集锦
2015/01/04 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL