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 相关文章推荐
js 编写规范
Mar 03 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
JS实现简单的九宫格抽奖
Jun 28 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP7 新增常量
2021/03/09 PHP
javascript里的条件判断
2007/02/27 Javascript
input的focus方法使用
2010/03/13 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
opencv实现图像几何变换
2021/03/24 Python
网上开店必备创业计划书
2014/01/26 职场文书
英语教学随笔感言
2014/02/20 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
体育教师教学随笔
2015/08/15 职场文书