当前位置:首页 > 日记 > 正文

浅谈jQuery中事情的动态绑定

浅谈jQuery中事情的动态绑定

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

一、bind()方法

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

<section id="container"> <img class="scv" src="images/scv.webp" alt="Terran unit" /></section>$('.scv').bind('click', function(){  $('#container').append('<img class="scv" src="images/scv.webp" 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中事情的动态绑定就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

ps软件怎样用钢笔来抠图

ps软件怎样用钢笔来抠图

抠图,方法,电脑软件,ps,  在ps软件中抠图的方法其实有很多,我们还可以使用钢笔来进行抠图。那么大家知道ps软件怎样用钢笔来抠图吗?下面是小编整理的ps软件怎样用钢笔来抠图的方法,希望能帮到大家!ps软件用钢笔来抠图的方法1、运行PS软件(…

WPS演示2013中如何设置自定义放映

WPS演示2013中如何设置自定义放映

自定义,设置,演示,如何设置,电脑软件,  打开一份幻灯片,有好多页,但是我们也没必要非要将不需要放映的删去,我们可以利用自定义放映的方法指定放映幻灯片中特定的几页。以下是小编为您带来的关于WPS演示2013中设置自定义放映,希望对您有所帮…

如何成为微信至尊会员?

如何成为微信至尊会员?

至尊,会员,电脑软件,  微信朋友圈里即将开始流行一种忽大忽小的字体。伴随着字体的发生,微信至尊会员也就奇妙的诞生了。利用特殊符号来改变自己的微信昵称,让自己瞬间变为微信至尊会员,就连土豪也不知道开通微信会员的方法哦!下面,小编来教…

excel修改图例系列名称教程excel怎

excel修改图例系列名称教程excel怎

图例,修改,教程,名称,系列,  在当今社会中,经常需要用到Excel进行办公,或许有些并不太熟悉Excel的朋友不会使用修改图例系列名称的功能,下面是由小编分享的excel修改图例系列名称教程,以供大家阅读和学习。excel修改图例系列名称教程修改图例…

node.js 发布订阅模式的实例

node.js 发布订阅模式的实例

模式,发布订阅,实例,电脑软件,node,实例如下://导入内置模块let EventEmitter = require('events');let util=require('util');//Man继承EventEmitterutil.inherits(Man,EventEmitter); //创建一个函数function Man(){}//实例化函数let …

Excel中2017版筛选复制粘贴结果的

Excel中2017版筛选复制粘贴结果的

筛选,复制粘贴,操作方法,操作步骤,电脑软件,  Excel是非常常用的办公软件,懂得如何进行粘贴是很有必要的,今天,小编就教大家在Excel中2017版筛选复制粘贴结果的操作方法。Excel中2017版筛选复制粘贴结果的操作步骤:1、启动Excel2017抢鲜版,并…

excel2007设置可编辑区域

excel2007设置可编辑区域

可编辑,设置,区域设置,区域,电脑软件,  在Excel中设置可编辑区域中是常用的功能,如果还有朋友不太会设置可编辑区域的,不妨学习学习一下。下面是小编带来的关于excel2007设置可编辑区域,希望阅读过后对你有所启发!excel2007设置可编辑区域: …

excel2007如何添加表格边框excel20

excel2007如何添加表格边框excel20

边框,教程,表格,电脑软件,  我们在输入完数据后要把表格打印出来,但是打印时是不会显示网格线的,这样看上去就不是很美观,怎么办呢?下面小编就教你excel2007如何添加表格边框,希望对你有帮助!excel2007添加表格边框的教程择边框区域,然后依次单…

WPS文字如何为输入的文字添加边框

WPS文字如何为输入的文字添加边框

文字,边框,输入,何为,电脑软件,  WPS为文字添加边框,操作起来是很简单的,想要学习WPS为文字添加边框的方法的朋友们可以一起来看看。以下是小编为您带来的关于WPS为文字添加边框,希望对您有所帮助。WPS为文字添加边框方法?打开WPS文字,新建一…

如何解决word2013无法插入公式的问

如何解决word2013无法插入公式的问

问题解决方法,解决方法,公式,如何解决,电脑软件,  当我们安装office2013后,当需要编辑包含数学公式的课件、文档时,打开word文档,发现没法插入数学公式,那么下面就由小编给大家分享下解决word2013无法插入公式的技巧,希望能帮助到您。word2013…

如何根据Excel2010单元格颜色进行

如何根据Excel2010单元格颜色进行

计算,单元格,颜色,电脑软件,  对填充有特定颜色的单元格数据进行求和,案例包括查找相同颜色的单元格、区域命名、求和函数等内容。以下是小编为您带来的关于根据Excel2010单元格颜色进行求和计算,希望对您有所帮助。根据Excel2010单元格颜…

excel表格函数示例使用教程

excel表格函数示例使用教程

函数,使用教程,表格,示例,实例教程,  excel函数是很常用的函数,但是很多时候函数根本记不住,怎么办?函数怎样用呢?下面给大家分享excel函数实例教程图解,希望看完本教程的朋友都能学会并运用起来。excel表格函数实例教程图解首先来了解一下VLO…