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

情景复现:

<!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. Netty入门1之----认识Netty

      Netty 什么是Netty? Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架. Netty 是一个广泛使用的 Java ...

  2. mobile webiste 中的css的font-size em及line-height等换算

    在mobile web设计 中,我们常常需要使用em这个字体大小的单位.em到底是多少呢? em到底应该设置为多少个em呢?通常换算成方法是1em=target fontsize we want/fo ...

  3. “云中论道”之——使用开源技术和Azure公有云服务快速搭建云端IoT解决方案（上）

    “云中论道”技术课堂第一课开讲啦!微软各路技术咖们齐聚一堂,为大家带来干货不断!作为“云中论道“课堂的开课之作,我们首先邀请到了微软Azure专家级的架构师:槐长清,他为我们带来了关于“使用开源技术和 ...

  4. js 数据格式化

    //金额增加千分号formatPrice(123456.78) = 123,456.78 function formatPrice(val) { var parts = val.toString(). ...

  5. 【Leetcode】【Medium】Search Insert Position

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  6. python全栈学习笔记（三）网络基础之网络设备及架构介绍

       

  7. c++11简单的线程

    线程的管理 启动线程 为了让编译器识别 std::thread 类,这个简单的例子也要包含 <thread> 头文件. 如同大多数C++标准库一样 线程在std::thread对象创建(为 ...

  8. 浅谈js冒泡事件2

    js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...

  9. 你是怎么调试 JavaScript 程序

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...

  10. Linux 命令行 发送邮件

    1.mail -s hi xx@yy.com 给xx@yy.com发一封主题为hi的信(没有正文) 编辑完内容后Ctrl-D结束. 2.echo "This is a test mail!& ...