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. Go基础---->go的第一个程序

    今天我们学习搭建一个学习go语言的开发环境. Go语言 一.下载go 下载地址:https://golang.org/dl/ 校验下载,在命令行输入go version 二.编写第一个hello wo ...

  2. handlebars Helper用法

    handlebars  Helper用法:  http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471357.html 逻辑运算符在handle ...

  3. 【POJ3621】Sightseeing Cows 分数规划

    [POJ3621]Sightseeing Cows 题意:在给定的一个图上寻找一个环路,使得总欢乐值(经过的点权值之和)/ 总时间(经过的边权值之和)最大. 题解:显然是分数规划,二分答案ans,将每 ...

  4. js打字效果

    //文字依次出来效果 $.fn.autotype = function() { var $text = $(this); // console.log('this', this); var str = ...

  5. jenkins提交SVN文件

    需求背景: 公司有内网和外网两台SVN服务器,都需要维护相同的配置文件,但是我们想能否在内网修改配置文件后同时提交到外网SVN服务器上. 开发人员操作步骤 1.开发人员在IDE中checkout内网c ...

  6. base64图片解析

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAk ...

  7. 8个Javascript小技巧

    1. 使用 + 字符可以转换成数字 比如要把一个字符串数字转换成数字,你可能会这样做: var one = '1'; var two = '2'; var numberOne = Number(one ...

  8. node jar sh

    https://nodejs.org/api/child_process.html Node.js v11.1.0 Documentation Index View on single page Vi ...

  9. Fat URLs Client Identification

    w在每个URL后面都附加一个用户特有的标识码. HTTP The Definitive Guide Some web sites keep track of user identity by gene ...

  10. linux使用http代理连接服务器设置方法

    连接腾讯的额cvm服务器官方给出的也有个方法,详细可以看这里:http://wiki.open.qq.com/wiki/%E4%BB%8E%E6%9C%AC%E5%9C%B0linux%E6%9C%B ...