jQuery 中 click事件会累计绑定

例如下列代码:

aNode.click(function(){

  bNode.click(function(){

    console.log('haha');

  });

});

如果把对bNode的点击事件绑定到aNode的点击事件里,那么每点击一次aNode就会绑定一次bNode,假设在点击bNode之前点击了3次aNode,那么点击bNode之后,控制台会出现三次haha。

因为jQuery中的click事件会累计绑定

为了避免上述情况发生,有两种解决办法:

1.应该避免把click事件绑定到其他的例如click,hover等事件中。

上述例子应该改成下面的形式:

aNode.click(function(){

});

bNode.click(function(){

  console.log('haha');

});

2.如果必须把click事件绑定在其他的例如click,hover等事件中的话(例如需要用到其他作用域中的变量,尤其是存在listitem这种情况下),需要用到unbind事件

click事件多次触发 jQuery的更多相关文章

  1. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  2. jQuery中click事件多次触发解决方案

    jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...

  3. mschart asp chart 用法,包括前台写法与后台写法,还有click事件,如何触发。

    纯后台动态生成aspchart ,这种方式没办法实现chart中click事件.click事件点击没有反应,用第二种可以实现点击事件. 两种方式实现同一种效果图: 第一种写法:后台动态生成aspcha ...

  4. element-ui中下拉菜单中的@click事件不会触发的问题

    只需要将@click=“fun()”改为@click.native=“fun()”,即可监听下拉菜单的点击事件. 如图所示: 嗯,就酱~

  5. jquery 动态生成html后click事件不触发原因

    转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...

  6. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  7. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  8. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  9. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

随机推荐

  1. 第一次广搜!HDU1548--A Strange Lift

    一上来看见题目就用了深搜(因为只会深搜)果断内存超限(据说时间也会超限)无奈只好开始用广搜 其实广搜的思路和深搜有很多类似的地方 不过实现的过程中用到了队列 因此有点难以理解(好吧我个人认为) 这题是 ...

  2. ERROR in [copy-webpack-plugin] unable to locate "D:/xxx/xxx/xxx"

    vue打包的时候npm run build报错 ERROR in [copy-webpack-plugin] unable to locate "D:/xxx/xxx/xxx" 这 ...

  3. java重构、js与接口的实现

    一.接口 接口的方法不一定必须实现的!!! 加入default,这样的方法可以不实现,如图所示 二.关于语言的特性 1.C++多继承 2.很多编程语言JavaScript.Python支持混入(Mix ...

  4. HDU3231 Box Relations——三维拓扑排序

    HDU3231 Box Relations 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3231 题目意思:在一个三维空间上有一些棱和坐标轴平行的立方 ...

  5. 品友互动大数据平台的技术演化 https://www.sohu.com/a/191202836_99982360

    品友互动大数据平台的技术演化

  6. ELK basic---http://udn.yyuap.com/doc/logstash-best-practice-cn/filter/grok.html

    http://blog.csdn.net/lgnlgn/article/details/8053626 elasticsearch学习入门 input {stdin{}}filter { grok { ...

  7. 剑指Offer——孩子们的游戏(圆圈中最后剩下的数)

    题目描述: 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机 ...

  8. nginx日志配置(cookie,header,post等字段记录)

    如果你对nginx日志格式,有这样那样的要求. 那么就看一下说明吧. $remote_addr The remote host $remote_user The authenticated user ...

  9. Python性能优化的20条建议

    优化算法时间复杂度 算法的时间复杂度对程序的执行效率影响最大,在Python中可以通过选择合适的数据结构来优化时间复杂度,如list和set查找某一个元素的时间复杂度分别是O(n)和O(1).不同的场 ...

  10. 【我的Android进阶之旅】Android 如何防止 so库文件被未知应用盗用?

    首先,关于Android 如何防止 so库文件被未知应用盗用这个话题并不是我擅长的,只是在开发中遇到了这个问题,因此在这里总结一下. 故事回到几个月之前,当时公司和第三方音乐平台合作了一款内置于手表系 ...