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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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
Php header()函数语法及使用代码
2013/11/04 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
前端性能优化建议
2020/09/17 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
详解python tkinter 图片插入问题
2020/09/03 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
自我鉴定注意事项
2014/01/19 职场文书
省三好学生申请材料
2014/01/22 职场文书
公务员检讨书
2014/11/01 职场文书
单位推荐信范文
2015/03/27 职场文书
社区服务活动感想
2015/08/11 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python