关于jquery：`on`和`live`或`bind`有什么区别？

What's the difference between `on` and `live` or `bind`?

在jQuery v1.7中，添加了一个新方法on。从文档中：

‘The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.’

live和bind有什么区别？

相关讨论

on()试图将大多数jQuery的事件绑定功能合并为一个。这具有通过live与delegate来整理效率低下的额外好处。在jQuery的将来版本中，将删除这些方法，仅保留on和one。

例子：

1
2
3
4
5

// Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click",".mySelector", fn);

1
2
3
4
5

// Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);

1
2
3
4
5

// Using delegate()
$(document.body).delegate(".mySelector","click", fn);

// Equivalent `on`
$(document.body).on("click",".mySelector", fn);

在内部，jQuery将所有这些方法和速记事件处理程序设置方法映射到on()方法，进一步指示您从现在开始就应该忽略这些方法，而只需使用on即可：

1
2
3
4
5
6
7
8
9
10

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},

参见https://github.com/jquery/jquery/blob/1.7/src/event.js#L965。