JQ事件委托导致点击事件多次执行问题

起因:最近写网页其中一个模块使用tab切换~每一个tab里都有点击按钮提交事件,刚开始点击提交只执行一次,但是只要我tab切换页面又切换回来该页面,再点击该按钮,我切换了多少次页面,代码提交也会提交很多次;

原因:后来找了一下原因,得知是因为JQ事件委托导致点击事件多次执行的(事件委托是指:利用事件冒泡,指定一个事件处理程序来管理某一类型的所有事件),虽然我页面切换了,但是事件问题还在,所以才会点击一次执行多次;

解决方法:使用off()函数移除之前添加的事件处理程序,就能解决该问题。

eg:

$(document).off().on(‘click‘,‘.recharge  button‘,function(){

  //所执行的代码

});

原文地址:https://www.cnblogs.com/cyeldxlz/p/8496211.html

时间: 2024-10-12 03:21:48

JQ事件委托导致点击事件多次执行问题的相关文章

对事件委托绑定click的事件的解绑

大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, $(".sideNav>ul").on("click", function (e) {     alert("aaa"+$(e.tagert).index()); } 即使做判断让一部分带有某个class的li标签的ul解绑click,依然无效

点击事件内嵌点击事件造成多次绑定

如果一个点击事件内部有另外一个点击事件,如下 $(function(){ $("#btn1").click(function() { console.log("outside"); $("#btn2").click(function() { console.log("inside"); }); }); }); 这样,在每次点击外部的点击事件后,内部的点击事件就会多次绑定,造成事件的重复触发,这是容易出错的一点. 如果必须要写成

JQuery的事件委托;jQuery注册事件;jQuery事件解绑

一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的事件不会有事件. ③使用方法:$("span").on("click",function(){alert("这是一个简单事件");}): $("div").on("click", "span"

absolute 导致点击事件无效

方案一: 添加层数 z-index 方案二: 背景的透明度为0 background-color:#000; filter:alpha(opacity=0); opacity:0;

先看看解析,事件委托:也称事件代理 就是利用冒泡的原理 把加事件加到父级上,触发执行效果

window.onload = function(){ var oUl = document.getElementById('ull'); var aLi = document.getElementsByTagName('li'); oUl.onmouseover = function(ev){ var event = ev||window.event; // 获取event对象 var target = ev.target || ev.srcElement; // 获取触发事件的目标对象 if

ListView中itemz中控件的点击事件和条目点击事件冲突

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:descendantFocusability="blocksDescendants&quo

事件委托和JQ事件绑定总结

事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 实现原理:我们知道,DOM在为页面中的每个元素分派事

JQ 为未来元素添加事件处理器—事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供了live().dalegate()和on()方法. 事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此

jQuery代码优化:事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台 MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快