jquery给label绑定click事件被触发两次解决方案
首先我们看下面的代码片段(label包裹checkbox)
<div class="example"><label for="chk_6" class="label-1">选项6<input class="chkbox-1" type="checkbox" id="chk_6" value="1"></label></div>
<div class="example"><label for="chk_7" class="label-1">选项7<input class="chkbox-1" type="checkbox" id="chk_7" value="1"></label></div>
<div class="example"><label for="chk_8" class="label-1">选项8<input class="chkbox-1" type="checkbox" id="chk_8" value="1"></label></div>
<div class="example"><label for="chk_9" class="label-1">选项9<input class="chkbox-1" type="checkbox" id="chk_9" value="1"></label></div>
<div class="example"><label for="chk_10" class="label-1">选项10<input class="chkbox-1" type="checkbox" id="chk_10" value="1"></label></div>
// 绑定label的click事件
$('.label-1').click(function (e) {
console.log($(this).text());
});
点击文字,再观察控制台我们会发现一个现象!!(代码被执行两次)
问题原因:
点击label的时候,事件冒泡一次,同时会触发关联的input的click事件,导致事件再次冒泡
解决方案一(修改html结构label和checkbox同级):
<div class="example"><label for="chk_1" class="label-1">选项1</label><input class="chkbox-1" type="checkbox" id="chk_1" value="1"></div>
<div class="example"><label for="chk_2" class="label-1">选项2</label><input class="chkbox-1" type="checkbox" id="chk_2" value="1"></div>
<div class="example"><label for="chk_3" class="label-1">选项3</label><input class="chkbox-1" type="checkbox" id="chk_3" value="1"></div>
<div class="example"><label for="chk_4" class="label-1">选项4</label><input class="chkbox-1" type="checkbox" id="chk_4" value="1"></div>
<div class="example"><label for="chk_5" class="label-1">选项5</label><input class="chkbox-1" type="checkbox" id="chk_5" value="1"></div>
刷新界面,点击文字,再观察控制台:
OK正常了。
解决方案二(修改js代码绑定checkbox的change事件):
// 绑定checkbox的change事件
$('.chkbox-1').change(function (e) {
console.log($(this).parent().text());
});
刷新界面,点击文字,再观察控制台:
OK正常了。
解决方案三(判断事件来源,如果是input,则阻止):
// 绑定label的click事件
$('.label-1').click(function (e) {
if ($(e.target).is("input"))
return;
console.log($(this).text());
});
解决方案四:
不用label(最简单直接粗暴的方法)
如果这篇文章对您有帮助,您可以打赏我
技术交流QQ群:15129679
jquery给label绑定click事件被触发两次解决方案的更多相关文章
- 点击label时click事件被触发两次的坑
今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...
- 关于jquery中on绑定click事件在苹果手机失效的问题
用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...
- jquery中on绑定click事件在苹果手机失效的问题
因为是动态添加的内容,所以想要使用click事件,需要给他用on绑定一下: $(document).on("click",".next_button",func ...
- 关于jquery中on绑定click事件在苹果手机失效的问题(巨坑啊)
用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...
- jquery中on绑定click事件在苹果手机中不起作用
写一个div当做了一个按钮来使用. <div class="button"> <div class="sure"> 确定 </di ...
- JQuery给元素绑定click事件多次执行的解决方法
原绑定方法: $(".subNavdiv").click(function () { ###### }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为 ...
- jquery中on绑定click事件在苹果手机失效问题解决(巨坑啊)
描述:用一个div写一个按钮,并给这个按钮添加一个点击事件,在安卓机器上一切正常,但是在苹果机型上会出现点击事件失效. <!DOCTYPE html> <html lang=&quo ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
随机推荐
- 3 Dalvik基础知识
Dalvik汇编基础知识: Dalvik指令:由位描述+指令格式标示 位描述: 1. 每16位空格隔开 2. 每个字母表示4位,每个字母按从高字节开始,排列到低字节.每四位之间可用 | 分开表示不同内 ...
- vavr:让你像写Scala一样写Java
本文阅读时间大约7分钟. Hystrix是Netflix开源的限流.熔断降级组件,去年发现Hystrix已经不再更新了,而在github主页上将我引导到了另一个替代项目--resilience4j,这 ...
- idea在maven中引入了jar包依赖,但是编译过程中报出XXX程序包不存在,已解决
idea在maven中引入了jar包依赖,但是编译过程中报出XXX程序包不存在 1. 报错具体情况 2. Project Structure中的Libraries没有任何红色波浪线 3. 发现自己要引 ...
- Nodejs入门级
应用不同模块分析 我们来分解一下这个应用,为了实现一个应用,我们需要实现哪些部分呢? 我们需要提供Web页面,因此需要一个HTTP服务器 对于不同的请求,根据请求的URL,我们的服务器需要给予不同的响 ...
- Flask-Script Manager
Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...
- 轻量级C#编辑器RoslynPad((基于Roslyn编译器))
简介 RoslynPad是一个Apache 2.0协议开源的轻量级C#编辑器.支持自动完成,语法提示,修改建议等功能.很适合平时随手写个C#程序看看运行结果. 目前版本:0.10.1,无需保存也可以运 ...
- Beta冲刺第3次
一.团队成员的学号姓名列表 学号 姓名 201731103226 翟仕佶 201731062517 曾中杰 201731062424 杨模 201731062632 邓高虎 201731062624 ...
- CentOS7.5搭建Rsync,实现文件同步
Rsync(remote sync)是UNIX及类UNIX平台下一款神奇的数据镜像备份软件,它不像FTP或其他文件传输服务那样需要进行全备份,Rsync可以根据数据的变化进行差异备份,从而减少数据流量 ...
- flex布局--小实例
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左到右为: ...
- 如何将页脚固定在页面底部,4中方法 转载自:W3CPLUS
原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...