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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
JS求平均值的小例子
Nov 29 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
使用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 HTML代码串截取代码
2008/12/29 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js运动应用实例解析
2015/12/28 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
python复制文件代码实现
2013/12/23 Python
Python入门篇之面向对象
2014/10/20 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
深入浅析python with语句简介
2018/04/11 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
如何使用Pytorch搭建模型
2020/10/26 Python
python urllib和urllib3知识点总结
2021/02/08 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
导游词之韩国济州岛
2019/10/28 职场文书