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系列(6) 强大的原型和原型链
Jan 15 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
MySQL修改密码方法总结
2008/03/25 PHP
PHP 字符串 小常识
2009/06/05 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
python 基于opencv实现图像增强
2020/12/23 Python
Python实现微信表情包炸群功能
2021/01/28 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
中式结婚主持词
2014/03/14 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
云冈石窟导游词
2015/02/04 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS