您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

jQuery live与bind的区别在哪里

时间:2019-09-09 13:46:00  来源:  作者:

平时在使用jQuery进行AJAX操作的时候,新生成的元素事件会失效,有时候不得不重新绑定一下事件,但是这样做很麻烦。例如评论分页后对评论内容的JS验证会失效等。在jQuery1.3之前有一个插件会解决这个问题http://plugins.jquery.com/project/livequery ,jQuery1.3以及之后的版本中增加了一个live()方法,下面是手册上的说明:

 

jQuery 1.3及之后版本中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

还不支持 blur, focus, mouseenter, mouseleave, change, submit

与bind()不同的是,live()一次只能绑定一个事件。

这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页 面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给 这种新增加的元素绑定事件。

.live()与流行的liveQuery插件很像,但有以下几个主要区别:

.live 目前只支持所有事件的子集,支持列表参考上面的说明。

.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。

.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。

要移除用live绑定的事件,请用die方法

 

用法示例:

<div class=”myDiv”></div>

jquery:

$(“.myDiv”).live(“click”, function(){

alert(“clicked!”);

});

如果使用JAVAscript动态创建一个class为mydiv的元素,点击元素依然会有弹出。为什么使用live后就有了呢?这是因为 jquery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。这跟 jquery.livequery插件不一样,jquery.livequery每20毫秒做一次检查,如有新生成则重新绑定一次事件。

 

使用live当然有利也有弊:

好处就是:元素更新时不用反复去定义事件。

坏处就是:把事件绑定在document上会在页面上每一个元素都呼叫一次,如使用不当会严重影响性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。



Tags:jQuery   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
本文将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?1、JavaScript定义:javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开...【详细内容】
2020-04-29   jQuery  点击:(3)  评论:(0)  加入收藏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text...【详细内容】
2019-12-09   jQuery  点击:(39)  评论:(0)  加入收藏
jQuery网页视频在线播放器代码特效说明:一款jQuery网页视频在线播放器代码免费下载,该播放器插件基于HTML5自带标签video制作,优化样式,使得各主流浏览器实现统一播放界面。(兼...【详细内容】
2019-10-29   jQuery  点击:(53)  评论:(0)  加入收藏
一、ajax的简介Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.同步是指:发送方发出数据后,...【详细内容】
2019-09-24   jQuery  点击:(26)  评论:(0)  加入收藏
jquery获取当前元素的位置,并且是相对于文档的位置。我们可以使用jQuery offset()方法来实现。offset()方法仅适用于可见元素。 下面我们结合简单的代码,给大家介绍jquery获...【详细内容】
2019-09-18   jQuery  点击:(104)  评论:(0)  加入收藏
jquery删除样式属性,如删除指定a标签中的href属性,我们可以通过removeAttr()方法来实现。removeAttr() 方法表示从被选元素中移除属性。 下面我们结合简单的代码示例,给大家介...【详细内容】
2019-09-18   jQuery  点击:(65)  评论:(0)  加入收藏
平时在使用jQuery进行AJAX操作的时候,新生成的元素事件会失效,有时候不得不重新绑定一下事件,但是这样做很麻烦。例如评论分页后对评论内容的JS验证会失效等。在jQuery1.3之前...【详细内容】
2019-09-09   jQuery  点击:(30)  评论:(0)  加入收藏
此文适合零基础、初学者阅读。相信零基础的你看完,将对web前端有一个深刻的认识,对你的学习会有很大帮助。1、JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开...【详细内容】
2019-09-04   jQuery  点击:(44)  评论:(0)  加入收藏
导语在软件开发中,MVC或者MVVM是经常被用到的设计模式。在web前端开发中,之前我们需要自己写许多代码来完成这项功能。而现在有许多优秀的类库可以帮我们实现这个功能。许多优...【详细内容】
2019-09-04   jQuery  点击:(97)  评论:(0)  加入收藏
//1.禁止右键点击$(document).ready(function(){$(document).bind("contextmenu",function(e){returnfalse;});});//2.隐藏搜索文本框文字Hidewhenclickedinthesearchfield...【详细内容】
2019-07-23   jQuery  点击:(74)  评论:(0)  加入收藏
angularjs简单介绍和特点首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的s...【详细内容】
2019-07-16   jQuery  点击:(164)  评论:(0)  加入收藏
jquery可以被视为Web开发的脊梁骨,jquery是一个快速简洁的javascript库,它简化了HTML文档、事件处理、动画制作和Ajax交互,以实现快速的Web开发。 jquery插件通过使Web应用程序...【详细内容】
2019-07-10   jQuery  点击:(139)  评论:(0)  加入收藏
这篇文章主要介绍了从如何写JQuery插件,需要注意的事项,还有必须要做的步骤,看过这个文章相信你会明白如何写好一个JQuery插件。普及JQuery知识知识1:用JQuery写插件时,核心的方...【详细内容】
2019-07-09   jQuery  点击:(71)  评论:(0)  加入收藏
1. 禁止右键点击$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; });});2. 隐藏搜索文本框文字Hide when clicked in the searc...【详细内容】
2019-06-27   jQuery  点击:(85)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条