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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
又一个小巧的图片预加载类
May 05 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
js实现继承的5种方式
Dec 01 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 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 include任意文件或URL介绍
2014/04/29 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python虚拟环境virtualenv的使用教程
2017/10/20 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
实例详解Python装饰器与闭包
2019/07/29 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
学习2014年全国两会心得体会
2014/03/12 职场文书
排查整治工作方案
2014/06/09 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
先进人物事迹材料
2014/12/29 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
淮海战役观后感
2015/06/11 职场文书
大学生读书笔记大全
2015/07/01 职场文书
小学体育组工作总结
2015/08/13 职场文书