浅谈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 相关文章推荐
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
微信小程序canvas实现签名功能
Jan 19 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP 编程安全性小结
2010/01/08 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
深入研究React中setState源码
2017/11/17 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
初学python数组的处理代码
2011/01/04 Python
python制作图片缩略图
2019/04/30 Python
python批量图片处理简单示例
2019/08/06 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
wxPython实现整点报时
2019/11/18 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
python爬虫 requests-html的使用
2020/11/30 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
营业员演讲稿
2013/12/30 职场文书
金融事务专业求职信
2014/04/25 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
导游欢送词
2015/01/31 职场文书
泰山导游词
2015/02/02 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript