出现情景:当内层事件需要外层事件触发后产生的一些值得时候

情景复现:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

</head>

<body>

    <button id="btn1">

    外层事件

    </button>

    <button id="btn2">

    内层事件

    </button>

</body>

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script>

    var count1=0;//记录外层事件执行次数

var count2=0;//记录内层事件执行总次

$('#btn1').on('click',function () {

    count1++;

    var testStr='外层中的字符串';

    console.log('第'+count1+'次外层事件')

    $('#btn2').on('click',function () {

        count2++;

        console.log(testStr);

        console.log('第'+count2+'次内层事件');

    })

})

</script>

</html>

页面效果

控制台内容:

可以看到每执行一次外层事件:

再次执行内层事件时,次数会一直累加

解决办法:

在内层事件绑定之前 利用$(selector).unbind(event) 方法先解绑一次:

更改的js代码如下:

<script>

    var count1=0;//记录外层事件执行次数

var count2=0;//记录内层事件执行总次

$('#btn1').on('click',function () {

    count1++;

    var testStr='外层中的字符串';

    console.log('第'+count1+'次外层事件')

    $('#btn2').unbind('click');//新增 解除绑定的click事件

    $('#btn2').on('click',function () {

        count2++;

        console.log(testStr);

        console.log('第'+count2+'次内层事件');

    })

})

</script>

再次进行测试:

解决内层事件多次被触发的问题

解决jquey中当事件嵌套时,内层事件会执行多次的问题的更多相关文章

  1. 使用call、apply和bind解决js中烦人的this，事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

  2. 解决Python中PyCharm导入模块时，模块名下出现红色波浪线的问题

    在博主第一次在PyCharm中导入模块时,模块名下出现红色波浪线,不影响程序执行,但强迫症忍不了 以下是解决办法 Let's do it ... 进入设置,找到Console下的Python Cons ...

  3. 解决 listView gridView 与ScrollView嵌套时的冲突

    package com.xqx.fight; import android.app.Activity; import android.os.Bundle; import android.view.Me ...

  4. 解决Qt中QTableWidget类方法setItem 时导致程序崩溃问题

    在为一个音乐播放器增加功能时莫明奇妙的出现程序崩溃,定位到是由于QTableWidget 的setItem方法导致的,最终在此处找到了解决方式. 大致是说不能在setItem之前连接cellChang ...

  5. 解决Jquery中使用each循环时，循环外的js依旧会执行

    今天在改项目bug时,发现一个问题,我获取一个div中所有的input,并取值时,判断某一条件,但是循环外的js依然可以执行. $(".tab-reg-next input").e ...

  6. 解决Iview 中 input 无法监听 enter 事件

    比如 我们想要在某个组件的根元素监听一个原生事件 可以使用 .native 修饰 v-on 例子: 这样子写 enter事件将无效 但是使用 .native 修饰 就可以监听到 enter事件啦.

  7. 解决eclipse中运行web项目时弹出的"Port 8080 required by Tomcat 9.0 Server at localhost is already in use...

    1.tomcat默认端口是8080,可以修改通过tomcat的端口 修改tomcat\conf\server.xml     结果运行程序,还是报"Port 8080 required by ...

  8. iOS解决表格中TextField,TextView编辑时，输入框被键盘遮挡的问题

    方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...

  9. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

随机推荐

  1. c++开发ocx入门实践三--基于opencv的简易视频播发器ocx

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/51404649  利用opencv做了个简易的视频播放器的ocx,可以在c++/c#/web ...

  2. 使用C3的一些新属性绘制谷歌浏览器的图标

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. QT组件与std性能

    https://blog.csdn.net/zy19940906/article/details/53694909

  4. js数组 标签： javascript 2016-08-03 14:15 131人阅读 评论(0) 收藏

    数组排序 reverse()方法 reverse()方法会反转数组的顺序. sort()方法 默认情况下sort()方法按升序排列数组项.为实现排序sort()方法调用每项的toString(),然后 ...

  5. windows生成硬链接

    因工作电脑需要同时使用pl/sql和toad工具需要同时配置32位和64位oracle client如此增加了维护tnsnames.ora的复杂程度使用windows硬链接可以减少工作量,每次只修改源 ...

  6. 小技巧：Mac下Metasploit渗透Oracle环境的搭建

    Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正的安全风险情报.这些功能包括智能开发,密码审计, ...

  7. 应用服务&领域服务

    应用服务&领域服务 DDD理论学习系列——案例及目录 1. 引言 单从字面理解,不管是领域服务还是应用服务,都是服务.而什么是服务?从SOA到微服务,它们所描述的服务都是一个宽泛的概念,我们可 ...

  8. Alpha Scrum1

    Alpha Scrum1 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:音乐网页前端页面编写,博客发布 吴沂章:博客编写 林锃寒:前端页面编写 ...

  9. servlet-api-2.5.jar - jar not loaded

    由于包重复,把发布后的项目中的servlet-api-2.5.jar删除,不要clean项目,直接重新启动server即可.由于优先使用项目中的包,而实际使用需要tomcat中的包导致,直入页面会报o ...

  10. BZOJ3670:[NOI2014]动物园(KMP)

    Description 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学习 ...