浅谈jQuery中事情的动态绑定


Posted in Javascript onFebruary 12, 2017

在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们。希望能够帮助大家更好的了解和使用jQuery的时间处理方法。

一、bind()方法

使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的元素上,如下:

<section id="container">
 <img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>
$('.scv').bind('click', function(){
  $('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});

如果你查看相关jQuery1.7.1最新文档的话,大家应该知道最新的jQuery中bind目前其实最后也是调用on()方法来实现的,所以呢,如果现在大家使用最新jQuery版本(目前为1.7.1)的话,尽量避免使用bind()方法。

如果大家点击运行这个示例肯定会发现,当点击第一个图片时,会生成新的图片,但是如果你点击新生成的图片,不会继续执行添加新图片的操作。为什么会这样呢? 因为使用bind绑定的元素是页面上所有存在的class="scv"的元素,新生成的元素添加到DOM,并没有绑定我们添加的click方法。那么怎么让新的图片也可以绑定我们click方法呢。我们可以使用clone()方法,如下:

$('.scv').bind('click', function(){
 $(this).clone(true).appendTo('#container');
});

我们这里使用clone方法来生成一个新的图片,并且添加到#container容器中。这里我们使用clone方法参数true,代表克隆的元素同时克隆绑定的方法。

二、live()方法

在老的jQuery版本中,我们有一个方法专门用来处理动态生成的元素的事件绑定-live(),使用live()方法可以将方法绑定的效果应用到已存在或者新创建的DOM元素。代码如下:

$('.scv').live('click', function(){
 $(this).clone().appendTo('#container');
});

live()调用过程如下:

我们首先将click方法绑定到了Document,然后,查找Document里是否有.scv这个元素。这个过程对于性能来说可能比较浪费,所以我们可以使用如下带参数方法优化方式:

$('.scv', '#container').live('click', function(){
 $(this).clone().appendTo('#container');
});

以上代码中我们使用#container作为绑定的上下文,jQuery将会在#container这个元素中查询.scv元素。

三、Delegate()方法

在最新的jQuery版本中,我们最好不要使用live()方法,因为它已经被放弃了,这里我们使用delegate方法来指定事件绑定的上下文,如下:

$('#container').delegate('.scv','click', function(){
  $(this).clone().appendTo('#container');
});

大家可以看到以上代码中,我们首先设定了方法绑定的上下文-#container,然后,寻找class为.scv的元素,再绑定click方法。

注意:这里克隆后添加到的元素应该是你定义的上下文,否则,新生成的图片绑定不上click方法。

四、on()方法

.on( events [, selector ] [, data ], handler(eventObject) )

这是jQuery官方给出的Api,其实在最新版本的jQuery类库中,所有以上方法在后面其实都是调用on()方法,所以,如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用。如下:

$('.scv').on('click', function(){
  $(this).clone(true).appendTo('#container');

});

如果要保证你动态添加的东西可以绑定上handler,那么$("selector").on()中的selector应该是更高的级别,父div,body或者document等。

五、总结

总的来说,最新的jQuery版本中,所有的方法基本最后都使用on()方法来处理,如果你针对新版本的jQuery做开发,大家可以考虑使用delegate()和on()方法处理事件绑定,虽然以前方法也可以用,但是大都都已经退出历史舞台。

以上这篇浅谈jQuery中事情的动态绑定就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript Excel操作知识点
Apr 24 Javascript
jQuery入门知识简介
Mar 04 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 #Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 #Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 #Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 #Javascript
超全面的vue.js使用总结
Feb 12 #Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 #Javascript
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
php时间戳转换代码详解
2019/08/04 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
采购主管工作职责
2013/12/12 职场文书
工地门卫岗位职责
2013/12/30 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
委托公证书格式
2015/01/26 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
索尼ICF-36收音机评测
2022/04/30 无线电