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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
解决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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python 多进程、多线程效率对比
2020/11/19 Python
想学画画?python满足你!
2020/12/24 Python
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
大学生找工作求职信
2014/07/09 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫