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 方法大全方便学习参考
Feb 25 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
js文字横向滚动特效
Nov 11 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
我所理解的JavaScript中的this指向
Sep 04 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
实例讲解php实现多线程
2019/01/27 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
nodejs基础应用
2017/02/03 NodeJs
微信小程序 实现点击添加移除class
2017/06/12 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python 深入理解yield
2008/09/06 Python
python 图片验证码代码
2008/12/07 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
flask-restful使用总结
2018/12/04 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Django URL参数Template反向解析
2020/11/24 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Android面试宝典
2013/08/06 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
市场专员岗位职责
2014/02/14 职场文书
治安消防安全责任书
2014/07/23 职场文书
群众路线领导对照材料
2014/08/23 职场文书
党员检讨书
2014/10/13 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
淮海战役观后感
2015/06/11 职场文书
复活读书笔记
2015/06/29 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server