jQuery实战教程 为动态添加元素添加事件
阿萨 2018-03-23 来源 :网络 阅读 852 评论 0

摘要:本篇jQuery实战教程将讲解为动态添加元素添加事件,看完这篇文章会让你对有更加清晰的理解和运用。

本篇jQuery实战教程将讲解为动态添加元素添加事件,看完这篇文章会让你对有更加清晰的理解和运用。

以前我们定义事件,比如为元素定义单击事件是这样写的:

$('input').click(function () {

    //处理代码

});//或者是

$('.clickme').bind('click', function() {

    // Bound handler called.

});

但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数,它并不能将事件也复制(到目前为止我还不清楚它是为什么这样定义,是没法复制还是刻意这么处理,以防止出现某些异常,这还有待去分析一下jquery的源代码)。

现在,使用live你可以轻松搞定,

$('.clickme').live('click', function() {

   // Live handler called.

});

这样,你即使在后面动态插入的元素,也会被绑定事件,

$('body').append('<div class="clickme">Another target</div>');

定义和用法:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

问题:使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍。

解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。

//先通过die()方法解除,再通过live()绑定

$("#selectAll").die().live("click",function(){

    //事件运行代码

});//先通过die()方法解除,再通过live()绑定

$("#selectAll").die().live("click",function(){

    //事件运行代码

});

 

jQuery 1.7以后就不支持了。。。。

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). - .live() | jQuery API Documentation


希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程