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对象和DOM对象相互转化
Apr 24 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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编写PDF文档生成器
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php计算title标题相似比的方法
2015/07/29 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
Javascript 编码约定(编码规范)
2018/03/11 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python要安装在哪个盘
2020/06/15 Python
浅谈Python3中print函数的换行
2020/08/05 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
七年级数学教学反思
2014/01/22 职场文书
赔偿协议书范本
2014/09/12 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python