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

情景复现:

<!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. 【阿里云产品公测】性能测试服务PTS的初步尝试

        性能测试服务PTS,对于像我这样对测试毫无概念的新手来说,这服务真的太好了,使用简单,官方教程又明细,连我这样的新手一看都明白了怎样使用. _%GGl$kH   下面是我来简单尝试一下,更多功 ...

  2. Android ImageButton单击切换按钮图片效果

    正常状态的效果: 按钮按下的效果图片: 一.在java中为图片按钮增加触摸监听的函数来实现图片切换,代码如下: ImageButton btn = (ImageButton)findViewById( ...

  3. 二维码Zxing&Zbar

    二维码Zxing&Zbar 前言:该项目主要介绍了二维码扫描.闪光灯开启.本地二维码图片识别.二维码生成.分别是zxing和zbar(网格二维码)分别实现,具体效果运行项目apk... 开发环 ...

  4. c windows控制台输出颜色文字

    #include <windows.h> //设置文字颜色void SetColor(int ForgC){ WORD wColor; //We will need this handle ...

  5. 【PHP系列】框架的抉择

    缘起 在PHP开发中,选择合适的框架有助于加快软件开发,节约宝贵的项目时间,让开发者专注于功能的实现上.框架的问题是需要很多的投入,选择框架时,我们更看重这个框架的未来,存在多年的大型框架必须要有好的 ...

  6. python vscode在centos下安装

    对于centos则如下: sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e ...

  7. Elasticsearch 架构原理

    为什么要学习架构? Elasticsearch的一些架构设计,对我们做性能调优.故障处理,具有非常重要的影响.下面将从Elasticsearch的准实时索引的实现.自动发现.rounting和repl ...

  8. PLSQL使用绑定变量

    想对一个sql做10046trace,结果因为10g数据库无法对sql_id做,只能使用绑定变量的方法,下面sql是如何使用绑定变量运行sql的语句 declare  v_sql  VARCHAR2( ...

  9. linux普通用户使用root权限执行命令的脚本

    上一篇有说到普通用户使用免密登录并使用root权限: http://www.cnblogs.com/01-single/p/8919254.html 现在使用脚本批量实现部署系统任务操作步骤: #!/ ...

  10. 026json和pickle，xml模块

    ###json和pickle ##json#dumps()data = #源数据data = json.dumps(data)这时候的data可以写入到文件了#loads()data = f.read ...