jquery里给未来元素[动态添加的元素]绑定事件的方法推荐 亲测

文章标签:
  • :
  • 07-02 16:21
  • :
  • 86次
  • :
  • 0条
  • 1赞

简介jquery里给未来元素绑定事件的方法,也就是通过动态添加的元素继承同辈元素的事件的方法。l

在jquery里,我们如果要给一个元素绑定一个事件,可以用on 、live 、bind,但其实我们不用去研究这三种方法的区别,和什么时候应该用什么样的方法,我们在要“绑定事件”的时候,全部用on就可以了[其它的几种方法会慢慢的被官方给放弃的]!

比如,我们要给一个ID为aijquery的按钮绑定一个点击的事件,有下面这几种方法:

$("#aijquery").click(function(){alert("点击~~");});
$("#aijquery").on("click",function(){alert("点击~~");});
$("#aijquery").bind("click",function(){alert("点击~~");});
$("#aijquery").live("click",function(){alert("点击~~");});

上面的这四种方法里,live已经是jquery1.7版本里被删除了,并把on的功能作了加强和完善,并且经常关注jquery官网的朋友应该也知道官网推荐的就是用on来代替其它的“绑定事件”“委派事件”的方法了,因为on的功能现在真的很强大!!

假设,我们的网页里有下面这样一段HTML:

<ul id="aijquery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>


如果,我们要给所有的li绑定一个点击事件,可以这样来写:

$("#aijquery li").on("click",function(){
    //具体的动作代码
});

上面这段代码,只对当前已经存在的li标签有用,如果是通过ajax或其它方法动态添加进去的li标签,就不会有用!

那么,如果我们要给所有的li都绑定一个点击事件,包括将来动态添加的li,那么我们可以这样来写:

$("#aijquery").on("click","li",function(){
    //具体的代码
});

上面这样的写法,就是我们本文要说的,给“未来元素”绑定事件的方法了!!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-19 13:03:32