开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery性能:$('#selector').live()vs手动绑定(当使用ajax请求时)

jQuery性能: $('#selector').live() vs 手动绑定(当使用ajax请求时)

在jQuery中，事件绑定是一项常见的操作。在处理动态加载的内容时，我们通常会使用.live()方法或手动绑定事件来实现。然而，从性能的角度来看，手动绑定事件通常比.live()方法更好。

.live()方法： .live()方法是jQuery早期版本中用于事件委托的方法，它可以自动为匹配选择器的元素绑定事件，包括动态添加的元素。但是，.live()方法在jQuery 1.7版本后已被废弃，推荐使用.on()方法代替。
手动绑定事件：手动绑定事件是指在动态加载内容后，使用.on()方法或直接使用事件绑定函数来为元素绑定事件。这种方式可以更精确地控制事件绑定的时机和范围，从而提高性能。

性能比较：

手动绑定事件通常比.live()方法更高效。原因如下：

.live()方法会在整个文档中搜索匹配选择器的元素，这会导致性能下降。而手动绑定事件可以通过指定更具体的选择器或父元素来减少搜索范围，提高性能。
.live()方法会将事件绑定到document对象上，然后通过事件冒泡机制来触发事件。这意味着每次事件触发时，都需要遍历整个DOM树来查找匹配的元素，造成性能损耗。而手动绑定事件可以直接将事件绑定到目标元素上，避免了不必要的遍历。
.live()方法在事件触发时需要执行额外的判断，以确定是否匹配选择器。而手动绑定事件可以直接触发事件，无需进行额外的判断，提高了执行效率。

综上所述，为了提高性能，推荐使用手动绑定事件而不是.live()方法。在手动绑定事件时，可以根据具体情况选择合适的选择器和事件绑定方式，以达到最佳性能。

腾讯云相关产品推荐：

云服务器（CVM）：提供可扩展的计算能力，用于部署和运行应用程序。
云数据库 MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。
云存储（COS）：提供安全可靠的对象存储服务，用于存储和访问各种类型的数据。
人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，帮助开发者构建智能应用。

更多腾讯云产品信息和介绍，请访问腾讯云官方网站：https://cloud.tencent.com/

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

事件绑定的几种常见方式

1.事件绑定的几种常见方式（以click事件为例） jquery: $(selector).click(function(){...})...[注意：live事件，jQuery 1.7以后版本使用on代替live，且移动设备safari浏览器不支持live事件] 【穿插解决方案：移动设备safari浏览器不支持live事件方法一：首先要给绑定...　　唯一的区别在于delegate的性能会比live稍好一些，因为live方法需要遍历整个dom去查selector而delegate只需要监测document就够了，想要更深入了解可以自己去网上查阅下...2.事件重复绑定的可能原因大量使用ajax 　　将所有事件写在一个大方法里，如： var clickEvent = function(){ $(a).bind(...); $(b).bind...(...); } 　　在大量使用ajax时，为了触发事件会在success里调用clickEvent方法，然后由于其他地方需要触发同样的事件又会调用clickEvent，这样很容易导致多次触发。

1.8K8 0

jQuery 快速入门教程

当使用上述插入、追加、替换、删除方法时，如果用于插入/追加/替换/删除的元素是文档中的元素，则这些元素将从原位置上消失。...触发click事件时，将按照绑定顺序依次执行每个处理函数。...live()方法绑定的处理函数 $("selector").die("click"); //主要用于解除通过delegate()方法绑定的处理函数 $(document).undelegate("selector...jQuery核心：Ajax jQuery还对Ajax进行了封装了，我们可以非常方便地发送一个Ajax请求，并对响应进行处理。...); } }); $.ajax()是是jQuery中Ajax的底层实现，其它Ajax请求方法都是基于该方法实现的。

13.6K3 0

jQuery 升级踩坑大全

使用了被废弃的jQuery.fn.live方法 jQuery Migrate库对此错误也在控制台有相应的警告： JQMIGRATE: jQuery.fn.live() is deprecated live...他们的接口分别是： $(selector).live('click', function(){/* some code */}); $(selector).on('click', [selector,]...但是如果在你调用on函数的时候，前面的$(selector)在当前的网页上根本不匹配任何元素（该元素可能是后面的代码才加到DOM里的），那是不会绑定成功的。...事实上，live函数将$(selector)代理到了document元素上，这个元素是肯定存在的，所以不会出现类似情况。...AJAX全局事件必须绑定到document节点上 jQuery Migrate中的警告如下： JQMIGRATE: AJAX events should be attached to document:

3.8K9 0

jQuery学习笔记

).ready(function) |将函数绑定到文档的就绪事件（当文档完成加载时） | |$(selector).click(function) |触发或将函数绑定到被选元素的点击事件 | |...$(selector).dblclick(function) |触发或将函数绑定到被选元素的双击事件 | |$(selector).focus(function) |触发或将函数绑定到被选元素的获得焦点事件...|触发、或将函数绑定到指定元素的 submit 事件 | |toggle() |绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。...AJAX AJAX AJAX = 异步JavaScript + XML 在不重载网页的情况下，后台加载数据并显示在页面上 AJAX菜鸟教程 jQuery ajax()方法 AJAX...POST() $.post() 使用 POST 请求向服务器提交数据

7.4K3 0

jQuery中on()、bind()、live()、delegate()之间的区别

，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数； data 可选；需要传递的参数； function 必需项；当绑定事件发生时，需要执行的函数...它会绑定事件到所有的选出来的元素上它不会绑定到在它执行完后动态添加的那些元素上当元素很多时，会出现效率问题当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题 2 .live()...Chaining没有被正确的支持当使用event.stopPropagation()是没用的，因为都要到达document 因为所有的selector/event都被绑定到document, 所以当我们使用...而不是document上，像这样： $('a', $('#container')).live(...); 3 .delegate() .delegate()则是更精确的小范围使用事件代理，性能优于...而和.live()相同的地方在于都是用event delegation; 优点你可以选择把事件绑定到对应的元素上 chaining被正确的支持了 jQuery仍然需要迭代查找所有的selector/event

1.2K3 0

jQuery 重点解析 write less,but do more

.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。....ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。....ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。....ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。 jQuery.get() 使用 HTTP GET 请求从服务器加载数据。...jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。

1.3K2 0

jQuery基础(五)一Ajax应用与常用插件-imooc

使用ajax()方法加载服务器数据使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下： jQuery.ajax...使用ajaxSetup()方法设置全局Ajax默认选项使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为： jQuery.ajaxSetup...它们的调用格式为： $(selector).ajaxStart(function())和$(selector).ajaxStop(function()) 其中，两个方法中括号都是绑定的函数，当发送Ajax...请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数例如，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax...，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options

16.5K2 0

jQuery

当Jquery名称冲突时，可以利用var jq = jQuery.noConflict()来使用jq代替表示Jquery。...Event 函数绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件...method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步，使用Ajax时必须）或 false（同步） send(string) 将请求发送到服务器。...} xmlhttp.open("GET","/example/xmle/books.xml",true); xmlhttp.send(); } 4. onreadystatechange 事件当请求被发送到服务器时...AJAX & ASP/PHP/DB/XML 通过标签绑定事件，绑定函数在服务器响应就绪时调用函数，发送HTTP请求，访问asp/php文件，文件中对数据库进行查询。

16.4K2 0

jQuery on()方法

绑定click事件，使用jquery的$().click(func)？别闹了，属实是low。虽然之前在ajax回调成功后通过dom添加过元素，遇到过这种情况，事件绑定会失效。...jQuery on()方法是官方推荐的绑定事件的一个方法。...$().on()的知识点补充：　　1.从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。...2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。　　3....时已经取消使用live()方法了，所以建议都使用on()方法。

1.1K1 0

jQuery ajax - ajax()方法

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。...关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法。...通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。...$(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。...HTTP 请求：GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

9.4K2 0

jquery学习

事件下面是 jQuery 中事件方法的一些例子： Event 函数绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector...(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 事件方法方法...//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定：如果获取的是 jQuery...//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。...jQuery.ajax(...)部分参数： url：请求地址 type：请求方式，GET、POST（1.9.0之后用method） headers：请求头 data：要发送的数据

2.2K4 0

Vanilla JS——最轻快的JavaScript框架

事实上,Vanilla JS的使用量已经远远超过了jQuery, Prototype JS, MooTools, YUI 和 Google Web Toolkit 的总和。...模块化 VanillaJS包括如下模块，下载安装时可以只选择需要的模块，以便提高性能。...s.display="none":setTimeout(fade,40)})(); jQuery $('#thing').fadeOut(); AJAX请求 Vanilla JS var r = new XMLHttpRequest...ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">$.ajax({ type: 'POST', url:

6.1K4 0

02-老马jQuery教程-jQuery事件处理

],fn]) $("p").blur(); 当元素失去焦点时触发 blur 事件，这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。...focusin([data],fn) $("p").focusin(); 当元素获得焦点时，触发 focusin 事件。当元素获得焦点时，触发 focusin 事件。...使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。参数: type:一个或多个事件类型，由空格分隔多个事件。...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

6.4K0 0

Python全栈之jQuery笔记

() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击当单击元素时,发生click事件....主动触发事件: 可使用jquery对象上的trigger方法来触发对象上绑定的事件....,当必须是它的内部元素span才能触发这个事件,支持动态绑定. on注册事件的语法: 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或自定义事件) 第二个参数:selector...$.ajax使用方法: 常用参数: 1、url 请求地址 2、type 请求方式,默认是'GET',常用的还有'POST' 3、dataType...前端性能优化分为如下几个方面: 一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息.

5.5K4 0

JavaScript 事件委托以及jQuery对事件委托的支持

，动态添加元素的时候，不需要再手动地绑定处理函数了。...，只能在jQuery1.9以前的版本中使用。...从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)如果不带参数，则所有绑定的live事件都会被移除。...与live() 相对应，取消绑定，则用下列代码： $("p").die(); 在事件绑定上，jQuery 提供了一种更通用的函数： on(events,[selector],[data],fn)...data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

8176 0

一个小时学会jQuery

jQuery 1.3 （2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也因此有了极大提升。这一版正式支持事件委托特性。...jQuery1.7 （2011年11月04号）：新版本包含了很多新的特征，特别提升了事件委派时的性能尤其是在IE7下。...收集一组元素，可以使用如下简单的语法： $(selector) 或者 jQuery(selector) 也许刚开始你会觉得$()符号有点奇怪，但大部分jQuery用户很快就喜欢上它的简洁。..."); }); //AJAX 请求失败时显示信息。...发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

18.5K7 1

4-Jquery学习四-事件操作

即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。要删除通过live()绑定的事件，请使用die()函数。...) $("selector").bind( "click" [, data ], handler ); // jQuery 1.3+ (1.4+支持参数data) $("selector").live(...使用该函数可以手动触发执行元素上绑定的事件处理函数，也会触发执行该元素的默认行为。...这里介绍的load()是一个事件函数，jQuery中还有一个同名的Ajax函数load()，用于通过Ajax加载html文档内容。...触发resize事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过resize()绑定的事件，请使用unbind()函数。

4.5K9 0

dom 自定义事件_pix4D生成dom

解决办法：（1）在每一个动态生成的地方都再绑定多一次事件，比如这个博客里面的例子（2）把bind改用live，因为live是实时监测的，对于新增的dom元素也是有效的（因为不断去绑定、判断，所以可能会影响...（4）在jquery1.7 起版本用on替代了bind()、live() 和 delegate() 方法。 3....5.关于bind：每次绑定事件之后事件会一直绑定着，除非用unbind解绑之后再重新绑定，要不然事件会一直存在，所以这就是为什么在做项目的时候，有时候ajax请求的结果会出现1,2,4,8这样叠加，是因为如果用了...bind，每次触发事件都会绑定一次操作，所以触发第一次的时候，ajax请求一次；第二次的时候，ajax请求1+1=2次；第三次就是1+2+1=4次；第四次就是1+2+4+1=8次，以此类推。...所以如果利用bind绑定事件的话，要先unbind解绑元素原本有的事件再绑定事件，才不会导致ajax请求多次。版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

4053 0

高质量jQuery代码的十二条经验

1、正确引用jQuery 尽量在body结束前才引入jQuery，而不是在head中。借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。...选择器高效正确的使用jQuery选择器是熟练使用jQuery的基础，而掌握jQuery选择器需要一定的时间积累，我们开始学习jQuery时就应该注意选择器的使用。...jQuery时可能会频繁的操作DOM，这是相当耗费性能的。...当改变样式，而不改变页面几何布局时，将会发生重绘。隐藏一个元素或者改变一个元素的背景色时都将导致一次重绘。当对页面结构进行更新时，将导致页面重布局。...记住，jQuery并非不可或缺，仅是一种选择。思考为什么要使用它。DOM操作？ajax？模版？css动画？还是选择符引擎？或许javascript微型框架或jQuery的定制版是更好的选择。

1.2K4 0

jQuery 教程

$(selector).selector 在jQuery 1.7中已经不被赞成使用。...选取单选按钮点击元素在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。...; } ); focus() 当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...HTTP 请求：GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。...() 当Deferred（延迟）对象被受理时，调用添加的处理程序 deferred.fail() 当Deferred（延迟）对象被拒绝时，调用添加的处理程序 deferred.isRejected()

17K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭