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小游戏实现代码
Aug 19 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue 动态创建组件的两种方法
Dec 31 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
js创建对象的方式总结
2015/01/10 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python单例模式实例分析
2015/04/08 Python
python生成式的send()方法(详解)
2017/05/08 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
软件工程专业推荐信
2013/10/28 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
面试后感谢信
2014/02/01 职场文书
婚假请假条怎么写
2014/04/10 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
Python WSGI 规范简介
2021/04/11 Python