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

感谢

原文地址:https://www.cnblogs.com/polarisone/p/11276057.html

时间: 2024-10-26 06:04:07

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

前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 所以我得解决办法就是在radio标签外套了一层div 绑定了id属性,同时将onclick事件绑定在这层div上.当我们触发它时,通过jQuery的子选择器找到内

RichEditControl控件的ContentChanged事件执行两次的解决办法

将近没事,在学习Devexpress.用到了RichEditControl控件,当在加载一个件时,发现ContentChanged事件被触发了两次. 想了半个小时也没想原来来.于是去官网下载官方文档查看,恍然大悟.原谅如下: Note that methods such as DevExpress.XtraRichEdit.API.Native.SubDocument.InsertText and DevExpress.XtraRichEdit.API.Native.SubDocument.In

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

label点击事件重复调用原因与解决办法

label>input结构,再给label绑定点击事件,会导致点击时执行2次点击事件的现象.比如下面的代码: <div class="radio"> <label> <input type="radio" ng-click="func($event)" id="ue" > 编辑器模式 </label> </div> <div class="rad

重写dispatchKeyEvent方法 按返回键back 执行两次的解决办法

重写dispatchKeyEvent方法 按返回键back 执行两次的解决方法 @Override   public boolean dispatchKeyEvent(KeyEvent event) {           if(event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAction() != KeyEvent.ACTION_UP) {//不响应按键抬起时的动作                //TODO 代码    

js新添加的标签,点击事件无效的原因和解决办法

对于新添加的标签应用如下写法会失效: $('.class').on("click",function(){--});相当于: $('.class').bind("click",function(){--});下边的方法会生效: $(document).on("click",'.class',function(){--});相当于: $('.class').live("click",function(){--});新版本的jqu

UILongPressGestureRecognizer 执行两次的解决办法

最近维护之前用iOS SDK 3.2写过的3年多前的map方面的模块,在地图上长按pin,发觉一个点莫名奇妙点插了两个pin.查了一下,原来是现在的sdk要在UILongPressGestureRecognizer绑定的selector方法里对UILongPressGestureRecognizer.state 进行下判断,额,蛋疼.下附问题解决办法: //长按地图事件 - (void)longPressGestureRecognizerAction:(UILongPressGestureRec

Jquery 事件执行两次

js(jquery)的on绑定点击事件执行两次的解决办法-不是事件绑定而是事件冒泡 阻止冒泡的方法并不止 return false 这一种,还有event.stopPropagation(),这两种方法是有区别的,简单来说:event.stopPropagation()会阻止事件往上冒泡,但是并不阻止事件本身:return false 则是既阻止了事件往上冒泡又阻止了事件本身. 修改前 $(".project_select").change(function () { var chec

Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件

Js代码   <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> 为这5个DIV绑定点击事件,当点击第2个的时候弹出提示2,第4个的时候弹出提示4 <script type="text/javascript"> $(function(){ $("div").e