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

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

情景复现:

<!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>

再次进行测试:

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

转载于:https://www.cnblogs.com/roseAT/p/10355754.html

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

解决Photoshop中直线转曲线时一条直线边无法转曲线的问题
目录解决Photoshop中直线转曲线时一条直线边无法转曲线的问题问题概述问题原因解决方法其他情况解决Photoshop中直线转曲线时一条直线边无法转曲线的问题 Mac OS 10.15 ...
把指定用户的命令写在/home/etc/rc.local中，系统开机时就会自动执行指定用户的命令。
把指定用户的命令写在/home/etc/rc.local中,系统开机时就会自动执行指定用户的命令.
解决Python中PyCharm导入模块时，模块名下出现红色波浪线的问题
在博主第一次在PyCharm中导入模块时,模块名下出现红色波浪线,不影响程序执行,但强迫症忍不了以下是解决办法 Let's do it ... 进入设置,找到Console下的Python Cons ...
解决jqweui中slider 按住移动时鼠标超出松开还会继续移动问题。
使用时按住移动,正常是没问题的,但是当鼠标超出slider范围时松开鼠标左键,移动还依然会跟随移动. //判断鼠标是否超出骰子位置,如超出则终止移动事件 if(!document.getElemen ...
时分秒导入oracle数据库,解决数据库中插入时间丢失时分秒
Java.util.Date转换为java.sql.Date带时分秒 java.util.Date需要转换为java.sql.Date,常规的方式转换过来只可以得到年月日,如若要取得时分秒,可以用Da ...
解决eclipse中打开xml文件时不显示namespace标签的问题
网上找了很多方法,都不能按佟刚的视频教程那样在xml底部看到namespace标签: 这是因为安装的springsource-tool-suite插件版本跟eclipse版本不兼容的原因,需要版本对应 ...
html 卸载事件不执行,javascript – 如何在contenteditable中删除HTML元素时触发事件
您可以使用 MutationObserver来实现此目的.要跟踪从您的contenteditable元素中删除的任何类型的节点,请遵循以下示例 span var observer = new Muta ...
iOS解决表格中TextField,TextView编辑时，输入框被键盘遮挡的问题
方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...
2021-07-05解决Pycharm中使用scrapy框架时出现 from .items import Item 报错
可能是你的根目录有问题只需要改根目录,具体如下

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

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

最新文章

热门文章