JavaScript动态加载重复绑定问题

 更新时间:2018年04月01日 14:49:29   投稿:mrr  
这篇文章主要介绍了JavaScript动态加载重复绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下

前言

在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图:

但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除。

经过排查,终于发现问题所在。

正文

当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等。还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,已经绑定了n次删除事件,所以在删除第n条数据时,也就会提示n次是否确认删除。

既然找到了错误的原因,就好解决了,在绑定删除事件前,只要把上次绑定的事件解绑就可以了。

代码:

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

总结

以上所述是小编给大家介绍的JavaScript动态加载重复绑定问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会

及时回复大家的!

相关文章

  • 微信小程序 授权登录详解(附完整源码)

    微信小程序 授权登录详解(附完整源码)

    这篇文章主要介绍了微信小程序 授权登录详解(附完整源码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 一道JS前端闭包面试题解析

    一道JS前端闭包面试题解析

    这篇文章主要针对一道JS前端闭包面试题进行解析,从例题出发详细介绍JS前端闭包相关知识,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 微信小程序选择图片控件

    微信小程序选择图片控件

    这篇文章主要为大家详细介绍了微信小程序选择图片控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 解析Javascript小括号“()”的多义性

    解析Javascript小括号“()”的多义性

    这篇文章主要介绍了Javascript小括号“()”的多义性。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 详解CocosCreator游戏之鱼群算法

    详解CocosCreator游戏之鱼群算法

    这篇文章主要介绍了详解CocosCreator游戏之鱼群算法,对算法感兴趣的同学,可以仔细参考下
    2021-04-04
  • 详解CocosCreator项目结构机制

    详解CocosCreator项目结构机制

    这篇文章主要介绍了详解CocosCreator项目结构机制,只有了解这些机制后,才能更好的进行项目开发,避免潜在错误,并且快速的除错
    2021-04-04
  • TypeScript新特性之using关键字的使用方法

    TypeScript新特性之using关键字的使用方法

    TypeScript 5.2版本中新添加了using关键字,目前该关键字的提案也进入了ECMAScript的Stage 3,也就是说很快就会进入JavaScript语言本身中,using和const, let和var一样都是用于变量声明的,那么它到底有什么与众不同的地方呢,本文给大家介绍的非常详细
    2023-11-11
  • js中变量的连续赋值(实例讲解)

    js中变量的连续赋值(实例讲解)

    下面小编就为大家带来一篇js中变量的连续赋值(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • yepnope.js 异步加载资源文件

    yepnope.js 异步加载资源文件

    yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。
    2011-09-09
  • element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    这篇文章主要介绍了element-ui 对话框dialog里使用echarts,报错'dom没有获取到'的问题,在这个事件里边进行echarts的初始化,执行数据,本文结合实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11

最新评论