1.首先，来看看bind和on的语法。
bind的用法：
$(‘a‘).bind(‘click‘,[data],function(){})
其事件的绑定者是固定的，就是a,第一个参数是事件，第二个参数可选，是要传递给回调函数的event.data参数，第三个参数是回调函数。例如：
on的用法：
on:$(‘body‘).on(‘click‘,‘a‘,[data],function(){})
相比于bind,除了事件的绑定者（这边是body）,在on的参数中还增加了一个选择器a，而事件将作用于这个a上面。
2.区别
正是由于on函数的参数中多出了一个选择器a，因此我们可以为动态生成的元素也绑定事件。而bind则做不到。
如下例子。
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
<script> $(function () { $(‘ul li‘).on(‘click‘,function(){ alert($(this).text()) }); }) </script>
<script> $(function () { $(‘ul li‘).bind(‘click‘,function(){ alert($(this).text()) }); }) </script>
上述代码用bind和on都没有什么区别。
但是假如我们动态再生成一个li,则bind方法对这个新生成的li就不起作用，只能用on方法。
以下这种写法不适用了
<script> // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力 $(function () { $(‘ul li‘).bind(‘click‘,function(){ alert($(this).text()) }); var ok = $(‘<li>4</li>‘); $(‘ul‘).last().append(ok); }) </script>
必须使用如下这种方式
<script> // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件 $(function () { $(‘ul‘).on(‘click‘,‘li‘,function(){ alert($(this).text()) }); var ok = $(‘<li>4</li>‘); $(‘ul‘).last().append(ok); }) </script>
所以总的来说，on可以通过委托给父元素的方法，为动态加入的子元素来添加事件。
我们经常用的$("body").on("clikc",function(){});就是把事件都委托给了最顶层的父元素body。
原文：https://www.cnblogs.com/roy-blog/p/9176899.html