jquery 执行两次？

Posted 2023-03-19

代码如下 ：
<label for="p">
<div class="zy_radio">
<input type="radio" name="price_id" id="p" value="1">
</div>
……
</label>
jQuery代码
// 购买年限
$( ".zy_time label" ).click( function ()
console.log('哈哈');

);

上面的代码 我简化一下 ；现在问题是 点击label 执行 jq代码 ，第一次执行 是选中 里面的radio 单选框，但是没有获取到选中值 ，但是他选中后 又执行一次 ，第二次执行是里面的单选框被选中后 执行的，这次才能获取到值。现在有什么办法让他只执行一次就可以选中，并获取到值。

参考技术A 如果是把点击事件绑定到label标签上，那肯定就是这种情况的，因为单选框的选中事件肯定是发生在label标签的点击事件发生之后的，所以label的点击事件是无法实时捕捉到单选框被选中后的值的。之所以会触发两次，是单选框的值改变后会产生事件冒泡，让上级的label标签再次触发事件。
解决办法可以通过事件委托，放过第一次触发，然后冒泡后的再来处理。但是，我更希望你换一种思路，不要只盯着label的点击事件，你可以考虑下利用单选框的change事件，也就是说只要单选框的选中状态发生改变就进行处理，这样当你点击label时单选框选中也会触发change事件的，而且不用担心会执行两次了。类似这样：
$( ".zy_time label input:radio" ).change( function ()
console.log('哈哈');

);

jquery的on绑定点击事件执行两次的解决办法

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡

遇到的问题：jquery中用.on()给页面中新加的元素添加点击事件时，点击事件源，绑定的事件执行两次，这里的alert会执行两次，相应地数组删除也执行两次，具体代码如下（其中.tabDel是页面加载之后新生成的元素，故不能用普通的$(‘.tabDel).click(function())的方法添加点击事件）：

 

上网找的解决方法大概有一下两种：
1、在用 on 绑定 click 事件之前，对该事件解绑，也就是

1 $(‘.right‘).off(‘click‘,‘.tabDel‘).on(‘click‘,‘.tabDel‘,function()//删除所加 tab 节点的函数
2             // alert(‘tab的索引：‘+$(this).parents(‘.contentLi2‘).index());
3             var iNum1 = $(this).parents(‘.contentLi2‘).index();
4             var iNum2 = $(this).parents(‘.anElement‘).index();
5             $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6             $(this).parents(‘.anElement‘).remove();
7         );

 

2、在on绑定的click事件执行之后进行解绑，用unbind()，即：

1 $(‘.right‘).on(‘click‘,‘.tabDel‘,function()//删除所加 tab 节点的函数
2             // alert(‘tab的索引：‘+$(this).parents(‘.contentLi2‘).index());
3             var iNum1 = $(this).parents(‘.contentLi2‘).index();
4             var iNum2 = $(this).parents(‘.anElement‘).index();
5             $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6             $(this).parents(‘.anElement‘).remove();
7         );
8         $(‘.right .tabDel‘).unbind(‘clock‘);

 

然而，这也没有解决问题，我遇到的情况是这也写了之后，alert不执行了，原因是刚才说过：‘.tabDel’是页面上后来生成的元素，不能直接绑定事件，而unbind()的语法是：

 1 $(selector).unbind(event,function) 

所以我就开始找其他解决问题的办法，知道后来发现在on绑定事件的时候没有阻止冒泡，在代码中加入 return false 阻止冒泡之后，事件正常运行了，代码如下：

1 $(‘.right‘).on(‘click‘,‘.tabDel‘,function()//删除所加 tab 节点的函数
2            // alert(‘tab的索引：‘+$(this).parents(‘.contentLi2‘).index());
3            var iNum1 = $(this).parents(‘.contentLi2‘).index();
4            var iNum2 = $(this).parents(‘.anElement‘).index();
5            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6            $(this).parents(‘.anElement‘).remove();
7            return false;
8        );

 

目前为止代码可以正常运行了，问题的元凶是冒泡，只是博主最开始找错了方向。
然而，阻止冒泡的方法并不止 return false 这一种，还有event.stopPropagation()，这两种方法是有区别的，简单来说：
event.stopPropagation()会阻止事件往上冒泡，但是并不阻止事件本身；
return false 则是既阻止了事件往上冒泡又阻止了事件本身。

转载自：https://www.cnblogs.com/WhiteM/p/7146028.html

感谢