解决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>
再次进行测试:
解决内层事件多次被触发的问题
解决jquey中当事件嵌套时,内层事件会执行多次的问题的更多相关文章
- 使用call、apply和bind解决js中烦人的this，事件绑定时的this和传参问题
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
- 解决Python中PyCharm导入模块时，模块名下出现红色波浪线的问题
在博主第一次在PyCharm中导入模块时,模块名下出现红色波浪线,不影响程序执行,但强迫症忍不了 以下是解决办法 Let's do it ... 进入设置,找到Console下的Python Cons ...
- 解决 listView gridView 与ScrollView嵌套时的冲突
package com.xqx.fight; import android.app.Activity; import android.os.Bundle; import android.view.Me ...
- 解决Qt中QTableWidget类方法setItem 时导致程序崩溃问题
在为一个音乐播放器增加功能时莫明奇妙的出现程序崩溃,定位到是由于QTableWidget 的setItem方法导致的,最终在此处找到了解决方式. 大致是说不能在setItem之前连接cellChang ...
- 解决Jquery中使用each循环时，循环外的js依旧会执行
今天在改项目bug时,发现一个问题,我获取一个div中所有的input,并取值时,判断某一条件,但是循环外的js依然可以执行. $(".tab-reg-next input").e ...
- 解决Iview 中 input 无法监听 enter 事件
比如 我们想要在某个组件的根元素监听一个原生事件 可以使用 .native 修饰 v-on 例子: 这样子写 enter事件将无效 但是使用 .native 修饰 就可以监听到 enter事件啦.
- 解决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 ...
- iOS解决表格中TextField,TextView编辑时，输入框被键盘遮挡的问题
方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
随机推荐
- Java 之数组（4）
什么是数组: 问:编写代码保存 4 名学生的考试成绩. 答:简单啊,定义 4 个变量呗 问:那“计算全年级 400 名学生的考试成绩”,肿么办 答: ....... 数组,就可以帮助你妥妥的解决问题啦 ...
- 23_ConcurrentLinkedQueue
[简述] ConcurrentLinkedQueue是一个适用于高并发场景下的队列,通过无锁的方式,实现了高并发状态下的高性能,通常ConcurrentLinkedQueu性能好于BlockingQu ...
- Maven 安装与使用（一）
1. 安装 参考:http://maven.apache.org/install.html A. win7环境下,官网下载maven安装文件 B. 解压缩maven文件 C. 确认已配置好JAVA环境 ...
- 【Jmeter】参数Parameters和Body Data
在做接口并发测试的时候,才发现Jmeter中的Parameters和Body Data两种参数格式并不是简单的一个是xx=xx,另外一个是json格式的参数 先看一个接口 [post] /api/xx ...
- 对连接到 Azure 中 Linux VM 时出现的问题进行详细的 SSH 故障排除的步骤
有许多可能的原因会导致 SSH 客户端无法访问 VM 上的 SSH 服务. 如果已经执行了较常规的 SSH 故障排除步骤,则需要进一步排查连接问题. 本文指导用户完成详细的故障排除步骤,以确定 SSH ...
- jquery mobile开发中常见的问题(转载)
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 处理方法: 在head标签内加入: <meta name="viewport" content="w ...
- ASP.NET常用内置对象之——Server
简介 Server对象是HttpServerUtility的一个实例,也是上下文对象context的一个属性,提供用于处理Web请求的Helper方法. 常用成员 一.Server.MapPath() ...
- 运维不仅仅是懂Linux就行，还需要知道这些……
运维不仅仅是懂Linux就行,因为还有一大部分的Windows运维,最近看一个报道说,windows的服务器占了47.71%.嗯,向windows运维人员致敬.当然我们这篇文章不是说运维除了懂Linu ...
- yii2框架安装运行init.bat报错php.exe不是内部或外部命令
在安装yii2框架的时候,遇到一个很纠结的问题.就是当我把安装包下载下来之后,在公司的电脑安装可以正常,当我回家用自己的电脑安装就报错,提示 php.exe 不是内部或外部命令,也不是可运行的程序.这 ...
- C++使用BOOST操作文件、目录
开始使用 在BOOST库出现之前,C++对于文件和目录的操作,大都借助于UNIX提供的底层文件和目录接口,从使用角度来看,这些底层的操作不够友好.BOOST中filesystem库是一种可移植的文件系 ...