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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
DOM 事件流详解
Jan 20 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JavaScript实现HSL拾色器
2020/05/21 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python3处理文件中每个词的方法
2015/05/22 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Django实现跨域的2种方法
2019/07/31 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
关于python 跨域处理方式详解
2020/03/28 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
中学教师自我鉴定
2014/02/07 职场文书
安全责任书怎么写
2014/07/28 职场文书
委托书的写法
2014/08/30 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书