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

情景复现:

<!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. RocketMQ读书笔记4——NameServer(MQ的协调者)

    [NameServer简述] 对于一个消息队列集群来说,系统由很多机器组成,每个机器的角色.IP地址都不相同,而且这些信息是变动的(如在某些情况下,会有新的Producer或Consumer加入). ...

  2. 二十三、css如何实现锯齿形---border-image

    css如何实现这样的样式: 解决方案: 这里需要用到的技术是border-image的灵活运用,首先需要一张图片,这里我选中的是这样子的,此后 的图片可以拿这个更改圆形的颜色以更改锯齿颜色: 底部透明 ...

  3. chrome 插件开发学习

    http://blog.csdn.net/my_business/article/details/7711525

  4. 在线官网Spring Initializr 或 IntelliJ IDEA 快速搭建springboot项目

    Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置’,实现零配置. 那么,如何快速新建一个一个spring ...

  5. python全栈学习笔记（一）网络基础之网络协议篇

    阅读目录 一.操作系统基础 二.网络通信原理 2.1 互联网的本质就是一系列的网络协议 2.2 osi七层协议 2.3 tcp/ip五层模型讲解 2.3.1 物理层 2.3.2 数据链路层 2.3.3 ...

  6. Sandworm Attack小结

    这个漏洞刚出来时就分析过,当时大致弄明白了原理,但对很多细节和原理还是一知半解.后来开始找工作……今天终于有时间来把欠的这部分功课补上. 这个漏洞网上的各种中英文分析已经很多了,因此这里我只根据自己的 ...

  7. JavaScript函数的声明与调用方式

    入职第一天小记 对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对JavaScript来个系统的总结. 如果要我们对H5中的表单做个简单的校验, ...

  8. python数据处理——numpy

    标准安装的Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元素可以是任何对象,因此列表中所保存的是对象的指针.这样为了保存一个简单的[1,2,3],需要有3个指针和三个 ...

  9. reactnative 原生组件通信原理

    http://www.csdn.net/article/2015-11-27/2826345-compare-React-Native-with-ExMobi 原生组件通信原理 React Nativ ...

  10. vector size函数使用注意事项

    vector 的size函数返回vector大小,返回值类型为size_type,Member type size_type is an unsigned integral type,即无符号整数: ...