jQuery中.bind()和.live()的区别

最新推荐文章于 2020-05-17 20:43:18 发布
原创 最新推荐文章于 2020-05-17 20:43:18 发布 · 687 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery

本文详细对比了jQuery中.bind()和.live()两种事件绑定方法的特点与使用场景。.bind()适用于当前已存在的DOM元素，而.live()能为动态生成的元素绑定事件。文中还介绍了两者的语法及适用范围。

表示以下是我自己目前捞干的.bind()和.live()的区别，有不对请指正哈哈吐舌头

.bind()方法和.live()方法都是jQuery用来绑定事件的。
.bind()貌似是可以绑定所有的js事件的，但是.live()只能用来绑定鼠标/键盘事件和jQuery1.4.1中的hover。

.bind()主要是改变了函数内部的this指向，是在ECMA5以后加入的，IE8以上的浏览器才支持，.live()是通用的。

.bind()只能给当前已经存在的元素绑定，但对绑定之后，js生成的元素的绑定是无效的；

而.live()是可以对后生成的元素也绑定相应的事件的。

二者用法都是一样的:$("#id").bind("click",function(){});/$("#id").live("click",function(){});

Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
10-19
在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on()，有些同学会对这四者存在一些疑虑，所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料，...
jQuery中的.bind()、.live()和.delegate()之间区别分析
10-28
在讨论jQuery中的事件绑定方法时，.bind()、.live()和.delegate()是三种重要的技术。为了深入理解这些方法之间的区别和特点，首先需要对DOM事件的传播机制有所了解。在DOM事件模型中，事件传播分为捕获和冒泡两个...
Jquery中bind和live的区别
czs1012的专栏
12-20 534
Jquery中绑定事件有三种方法：以click事件为例    （1）target.click(function(){});    （2）target.bind("click",function(){});    （3）target.live("click",function(){}); 第一种方法很好理解，其实就和普通JS的用法差不多，只是少了一个on而已 第二、三种方法都是绑定事件，但
bind() 和live()的区别
10-10 807
Jquery中绑定事件有三种方法：以click事件为例    （1）target.click(function(){});    （2）target.bind("click",function(){});    （3）target.live("click",function
jquery 里bind（）和live()函数的区别和用法
xwnxwn的专栏
06-27 913
jquery 里bind（）和live()函数的区别和用法 bind: $("p").bind("click", function(){   alert( $(this).text() ); }); $("form").bind("submit", function() { return false; }) $("form").bind("submit", function(event
jQuery live与bind的区别
u011927449的博客
04-16 244
平时在使用jQuery进行AJAX操作的时候，新生成的元素事件会失效，有时候不得不重新绑定一下事件，但是这样做很麻烦。例如评论分页后对评论内容的JS验证会失效等。在jQuery1.3之前有一个插件会解决这个问题http://plugins.jquery.com/project/livequery，jQuery1.3增加了一个live()方法，下面是手册上的说明： jQuery 1.3中新增的方...
jquery中 bind和live区别
赶路人儿
04-24 802
什么是.live()? 除了让你对Dom元素现在和将来绑定事件之外，.live() 方法和.bind()方法很像。你可以用.live()方法对没有存在的Dom节点绑定事件。考虑下面的情况。 当用户要离开你的站点时，点击任何连接，你可以警告他： 1 $(document).ready( function() {
jQuery中.live()方法的用法深入解析
12-10
使用livequery插件，或可以使用jquery的live方法。摘录一段live简单使用方法。 更多详情还见官网 http://api.jquery.com/live/ live(type, [data],fn) 概述 jQuery给所有匹配的元素附加一个事件处理函数，即使这个...
jQuery bind函数和live函数
ThomasKwan的博客
09-29 260
jQuery绑定事件函数区别 bind(type,[data],func); 为每个匹配元素的特定事件绑定一个事件处理器函数。 如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。 type:事件类型 example: click mouseover等等。 data:可选 作为event.data属性值 传递给事件对象的额外数据对象 func:绑定到每个匹配元...
jquery中的live()和bind()方法的区别？
黄彪博客
12-04 570
live()不受加载时间顺序的影响，只要查找能够配对上就能够绑定对应的事件，而bind方法只有在第一次被加载的时候才绑定时间，如果代码之后再加载配对的元素，则不能绑定对应的事件   $("#manual_disconnect").live("click", function(){ connectionProfile("0"); }); $("#manual_disconnect")
jquery的live使用注意事项
01-19
————————– 题记 最近开发遇到一个很奇怪的问题，一个按钮点击提交时发生多次请求，导致数据重复。 那么，经过调试发现，出现问题的原因便在于$(“#id”).live(“click”, function() {});这个live身上，若使用bind可能达不到要求，因为若异步请求后返回请求为html而不是json的话，当使用html重新刷新页面时，bind的组件可能失效。 ————————— 解决 所以，最后只能在html标签元素上面加上onclick属性来解决。 这样既解决了异步返回html格式的处理方式，也解决了由于类似于多次html()刷新页面（包括js部分）导致多次绑定而引起的一次点
jquery中的bind()、live()的区别与使用（事件处理）
weixin_30341735的博客
10-28 105
使用jquery有一段时间了，刚开始看别人的源代码的时候对事件的绑定方法有疑惑。比如： var btn=$("#button"); btn.click(function(){ alert("I have been clicked!"); }); 这就绑定了一个click事件。 1.bind()方法解析 但后来发现jqueryAPI里面还有bind方法，...
事件绑定方法live和bind的区别及使用场合
layman1024的博客
05-17 453
Jquery中绑定事件有三种方法click、bind、live第一种方法很好理解，其实就和普通JS的用法差不多，只是少了一个on而已第二、三种方法都是绑定事件 　　Jquery中绑定事件有三种方法：以click事件为例 　　（1）target.click(function(){}); 　　（2）target.bind("click",function(){}); 　　（3）target.li
jQuery中bind与live的用法与区别
itmyhome的专栏
12-18 6120
首先介绍这两个方法之前，我们常用的是click()方法 $("a").click(function() { alert("hello"); }); click()方法是bind()方法的一种简单方法。在bind()中， jQuery所有JavaScript事件对象，比如focus, mouseover,和resize， 都是可以作为type参数传递进来的。 参数：type,[d
Jquery中.bind() .live() .delegate()和.on()之间的区别
weCat_s的博客
02-17 254
.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 .live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。这个方法在Jquery 1.7以后的版本被弃用了，你应该在你的代码里逐步放弃使用它 ....
jquery中live和bind的区别
yeshao_info的专栏
06-20 403
记录一下，今天在项目中碰到的问题，页面中用bind绑定了click方法，但是页面局部刷新后（通过分页取下一页数据），再点击页面中某条数据的编辑按钮，没效果，以前没怎么注意，见jquery API说的很清楚，记录一下：   API说明如下： live():       这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以
实现JavaScript中的bind函数
ProswpuAlan的博客
02-01 510
我们通常使用函数的bind方法来指定函数内部的this指向，下面就是bind函数的简单封装 function.prototype.bind = function()  var self = this; //保存原函数的this指针  var context = [].shift.call(arguments); //返回第一个将这个作为函数执行的this指针  var args = [
JavaScript事件bind方法的个人笔记
xun__xing的博客
05-17 769
bind方法上期答疑一、引出二、原理 上期答疑 1.30CAC0040取出40,3SFASDF92取出92 var reg = /\d{2}$/g; 2.使字符串内空格统一，如:蓝 色 理 想——蓝 色 理 想 var reg = /\s+/g; str.replace(reg,' '); 3.判断字符串是不是由数字组成 var reg = /^\d+$/g; 4.手机电话号码正则表达式 reg = /^1\d{10}$/; 5.只能输入数字和. reg = /^[0-9\.]+$/g; 6.只能
js live方法
赶路人儿
04-24 3572
从jQuery1.7开始，  .live() 方法已经过时了。请使用.on()附加事件处理程序。 旧版本的jQuery中用户，应优先使用.delegate()来取代.live()。 这个方法提供了一种手段，将委托的事件处理程序附加到一个页面的document元素，从而简化了在页面上动态添加的内容上事件处理的使用。直接与委派事件的讨论，请查看.on()方法的更多信息。 在其继承者重写
jquery升级控制台打印jqmigrate:jquery.fn.bind() is deprecated
最新发布
03-04
<think>好的，我现在需要帮助用户解决关于jQuery升级后控制台打印的弃用警告问题。用户提到的错误信息是“jqmigrate:jquery.fn.bind() is deprecated”。首先，我需要理解这个警告的含义以及它产生的原因。 首先，我知道jQuery Migrate插件是用来帮助开发者检测和修复在升级jQuery时可能出现的兼容性问题的工具。当用户看到这个警告，说明他们正在使用的jQuery版本已经弃用了某些旧方法，而他们的代码中还在使用这些方法。在这种情况下，具体是`.bind()`方法被弃用了。 接下来，我需要回忆jQuery中事件绑定的方法演变。记得在早期的jQuery版本中，`.bind()`是用来绑定事件处理函数的，但后来jQuery引入了`.on()`方法，作为更通用的事件处理接口，推荐使用`.on()`来替代`.bind()`、`.delegate()`和`.live()`等方法。因此，当用户升级到较新的jQuery版本（比如1.7以上）时，使用`.bind()`会触发弃用警告，最终可能在更高版本中被移除。 现在，我需要考虑用户为什么会遇到这个问题。可能的情况是，用户最近升级了jQuery的版本，或者引入了jQuery Migrate插件来检测过时的用法。用户需要修改代码，将所有的`.bind()`调用替换为`.on()`，以消除警告并确保未来的兼容性。 接下来，我应该提供具体的解决方案。替换`.bind()`为`.on()`的语法相对简单，但需要注意参数的正确传递。例如，原来的`.bind('click', handler)`应该改为`.on('click', handler)`。此外，还需要提醒用户检查是否有第三方插件或库仍然在使用`.bind()`，因为这些也可能触发警告，需要更新或替换这些插件。 另外，可能需要建议用户查阅jQuery官方升级指南，或者使用jQuery Migrate插件的详细输出模式来定位所有弃用用法的具体位置。同时，提醒他们在完成替换后测试功能，确保事件处理正常运作。 最后，我需要确保回答结构清晰，分步骤说明问题原因、解决方案和注意事项，帮助用户系统地解决问题。</think>关于控制台出现`jqmigrate:jquery.fn.bind() is deprecated`警告的完整解析： 1️⃣ **问题根源** - 该警告由**jQuery Migrate插件**生成 - 触发条件：项目升级到jQuery 3.x且保留jQuery Migrate插件 - 核心问题：代码中存在过时的`.bind()`方法调用 2️⃣ **技术背景** - 📅 `.bind()`是jQuery 1.0-1.7的旧式事件绑定方法 - 🆕 jQuery 1.7+ 引入更强大的`.on()`方法 - ⚠️ 自jQuery 3.0起，`.bind()`被标记为**已弃用** 3️⃣ **解决方案** 🔄 代码级修改： ```javascript // 旧写法（触发警告） $('#element').bind('click', handler); // 新标准写法 $('#element').on('click', handler); ``` 4️⃣ **升级注意事项** - 🔍 全局搜索代码中的`.bind(`字符（含插件代码） - 🌐 第三方插件处理： 1. 检查是否有老旧插件仍使用`.bind()` 2. 优先更新到支持新版jQuery的插件版本 3. 必要时手动修改插件源码（替换为`.on()`） 5️⃣ **进阶调试技巧** - 启用详细日志模式（控制台输出具体文件位置）： ```html <script src="jquery-migrate-3.0.0.js"></script> <script> jQuery.migrateTrace = true; </script> ``` 6️⃣ **兼容性策略** - 临时回退方案（不推荐）： ```html <!-- 移除Migrate插件将导致旧代码直接报错 --> <!-- <script src="jquery-migrate-3.0.0.js"></script> --> ``` 7️⃣ **官方建议** - 完整迁移指南参考：[jQuery 3.0升级文档](https://jquery.com/upgrade-guide/3.0/) - 推荐使用`.on()`的优势： ✅ 统一事件绑定接口 ✅ 支持动态元素事件委托 ✅ 更好的内存管理 完成修改后，建议通过以下方式验证： 1. 保留Migrate插件观察控制台 2. 执行完整的功能测试 3. 使用自动化测试工具检测事件绑定 4. 最终移除Migrate插件验证稳定性
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值