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 Distilled 基础知识与函数
Apr 07 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js 操作符汇总
Nov 08 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 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学习笔记之 函数声明
2011/06/09 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
工程地质勘察专业大学生求职信
2013/10/13 职场文书
给老师的道歉信
2014/01/11 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers