jQuery中 .bind() .live(). delegate() . on() 的区别

本文主要是介绍jQuery中 .bind() .live(). delegate() . on() 的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jQuery中 .bind() .live(). delegate() . on() 的区别

这几种方法都是绑定事件用到的，但是他们之间有些差别

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

例如：

<ul><a href="#"><li>1111111</li></a><a href="#"><li>22222</li></a><a href="#"><li>33333</li></a><a href="#"><li>44444</li></a><a href="#"><li>555555</li></a></ul>
<script>$("a").bind("click",function(){alert("ok")});
</script>

例如当我们用bind为a元素绑定事件时，有多少a元素，就是绑定多少次事件，这样比较消费性能

这种绑定方式有以下缺点：

1）它会绑定事件到所有选出来的元素上，例如上面的a元素

2）当页面加载完成是，才可以进行bind(),所以效率较低

3) 不可以为动态创建的html元素绑定事件，即动态创建的html用bind绑定是无效的

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

以上面的例子为例：

$("a").live("click",function(){alert("ok")});

delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

<ul><a href="#"><li>1111111</li></a><a href="#"><li>22222</li></a><a href="#"><li>33333</li></a><a href="#"><li>44444</li></a><a href="#"><li>555555</li></a></ul><input type="button" id="btnAdd" value="添加新的元素" />

点击添加新元素按钮，添加一个li元素，并为新添加的li元素绑定事件，代码如下：

$("#btnAdd").on("click",function(){$("ul").append("<a id='ltLast' href='#''><li>我是后添加的了哦</li></a>");});//动态创建的html绑定事件需要用到delegate方法$("ul").delegate("#ltLast","click",function(){alert("可以点击我么");});