jquery live()重复绑定的解决方法介绍


Posted in Javascript onJanuary 03, 2014

Query中.live()方法的使用方法

今天在写代码的时候遇到一个问题,直接上代码看:
$(function(){
           $(".file").live("click",function(){
                    var task_name=$(this).text();
                    $("#selecting tbody").append("<trclass=gradeA'><tdclass='center'>"+task_name+"</td></tr>");     
           });  
    });

$(".file")对象是从后台传过来的,click肯定是不行的,bind()也无法获取动态添加的元素,因此只能用live(),但是使用live()遇到的问题是表格行会莫名其妙的添加了两行,即绑定事件重复执行了,纠结了一上午终于找到了原因,先看live()方法的介绍。

live(type, [data],fn)

概述

jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
<div class="clickme">Clickhere</div>
<body>

可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() {        
alert("Bound handler called.");     
}); 

当点击了元素,就会弹出一个警告框。

然后,想象一下这之后有另一个元素添加进来了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live()就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$('.clickme').live('click', function() {
alert("Live handler called.");      
});

然后再添加一个新元素:

$('body').append('<divclass="clickme">Anothertarget</div>');

然后再点击新增的元素,他依然能够触发事件处理函数。 

事件委托

.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live()的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

1、生成一个click事件传递给<div> 来处理

2、由于没有事件处理函数直接绑定在 <div>上,所以事件冒泡到DOM树上

3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。

4、执行由 .live()绑定的特殊的 click 事件处理函数。

5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测$(event.target).closest('.clickme') 能否找到匹配的元素来实现的。

6、如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。

附加说明

.live()虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:

在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。

另 外,在jQuery1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()方法,正如前面例子里提到的。

当一个事件处理函数用 .live()绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation()无法实现这个目的。

参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jQuery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟.bind() 提供的功能类似。

在jQuery 1.4中,data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind()的讨论来获得更多信息。

参数

typeString     事件类型

data(可选)    Object          欲绑定的事件处理函数

fn                  Function        欲绑定的事件处理函数

示例

HTML 代码:

<p>Clickme!</p>

jQuery 代码:
$("p").live("click", function(){
$(this).after("<p>Anotherparagraph!</p>");
});

描述:

阻止默认事件行为和事件冒泡,返回false

jQuery 代码:
$("a").live("click",function() { return false; });

//根本原因在这,需要阻止默认事件行为和事件冒泡,在代码后面添加return false;就OK了

描述:

仅仅阻止默认事件行为

jQuery 代码:
$("a").live("click", function(event){
event.preventDefault();
});

Javascript 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
小程序实现层叠卡片滑动效果
Aug 26 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 #Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 #Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 #Javascript
JS+JSP checkBox 全选具体实现
Jan 02 #Javascript
使用js完成节点的增删改复制等的操作
Jan 02 #Javascript
js实现动态改变字体大小代码
Jan 02 #Javascript
js创建元素(节点)示例
Jan 02 #Javascript
You might like
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
教你php如何实现验证码
2016/01/20 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
学期自我鉴定范文
2013/10/01 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
财务科科长岗位职责
2014/03/10 职场文书
交通事故私了协议书
2014/04/16 职场文书
大学生作弊检讨书
2014/09/11 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
课外活动总结
2015/02/04 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android