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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
使用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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python标准库与第三方库详解
2014/07/22 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python logging模块用法示例
2018/08/28 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python自动点赞功能的实现思路
2020/02/26 Python
django实现日志按日期分割
2020/05/21 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
优良学风班申请材料
2014/02/13 职场文书
银行职员自我鉴定
2014/04/20 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
煤矿安全协议书
2014/08/20 职场文书
2015年统战工作总结
2015/05/19 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android