jQuery中on与bind的区别

127 阅读 0 评论 84 点赞

我是靠谱客的博主含蓄小虾米，这篇文章主要介绍jQuery中on与bind的区别，现在分享给大家，希望可以做个参考。

具体用法：
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)

示例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$(function () {
$('ul li').on('click',function(){
alert($(this).text())
});
})
</script>

此时on或bind都一样；

复制代码

1
2
3
4
5
6
7
8
9
10
<script>
// 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力
$(function () {
$('ul li').bind('click',function(){
alert($(this).text())
});
var ok = $('<li>4</li>');
$('ul').last().append(ok);
})
</script>

此时动态添加的新li元素并没有绑定事件，修改后：

复制代码

1
2
3
4
5
6
7
8
9
10
<script>
// 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件
$(function () {
$('ul').on('click','li',function(){
alert($(this).text())
});
var ok = $('<li>4</li>');
$('ul').last().append(ok);
})
</script>