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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
json数据处理及数据绑定
Jan 25 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php的大小写敏感问题整理
2011/12/29 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
用python解压分析jar包实例
2020/01/16 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
劳资协议书范本
2014/04/23 职场文书
三方股东合作协议书
2014/10/28 职场文书
优秀护士事迹材料
2014/12/25 职场文书
教师求职自荐信
2015/03/26 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android