浅谈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 相关文章推荐
javascript判断非数字的简单例子
Jul 18 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
js操作数组函数实例小结
Dec 10 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 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和ACCESS写聊天室(十)
2006/10/09 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
强制设为首页代码
2006/06/19 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
python实现年会抽奖程序
2019/01/22 Python
Python魔法方法详解
2019/02/13 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
优秀党员事迹材料
2014/12/18 职场文书
顶岗实习协议书
2015/01/29 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
吃通javascript正则表达式
2021/04/21 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android