自jQuery1.7以后，建议用on()代替bind(),执行为备选元素添加一个或多个处理程序，并规定当函数运行时发生。
1 语法
on()和bind()的语法分别如下：
// on的语法 $(selector).on(event ,data, function) // bind的语法 $(selector).bind(event,data,function)
|
参数 |
描述 |
|
*event |
必需。规定要从被选元素添加的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。 |
|
childSelector |
可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 |
|
data |
可选。规定传递到函数的额外数据。 |
|
function |
可选。规定当事件发生时运行的函数。 |
从这里可以看出，on()与bind()的区别在于，on()能够添加到指定的子元素处理程序。看来，on()的内心有着它的继承者，而bind()的内心只有自己。
2 例子
下面，一个例子，点击button，切换p的显示和隐藏（由于例子简单，就不显示页面效果了）。HTML代码如下：
1 <body> 2 <div style="background-color:red"> 3 <p>这是一个段落。</p> 4 <button>请点击这里</button> 5 </div> 6 </body>
使用bind()方法jQuery代替如下：
1 $(document).ready(function(){ 2 $("button").bind("click",function(){ 3 $("p").slideToggle(); 4 }); 5 });
使用on()方法代替bind()代码如下：
1 $(document).ready(function () { 2 $("button").on("click", function () { 3 $("p").slideToggle(); 4 }); 5 });
我们注意到，on可以添加指定子元素的处理程序。因此，jQuery代码也可以如下表示：
$(document).ready(function () { $("body").on("click", "button", function () { $("p").slideToggle(); }); });
完结，✿✿ヽ(°▽°)ノ✿。
3 扩展问题
参考网址
jQuery 事件 - bind() 方法: https://www.w3school.com.cn/jquery/event_bind.asp
https://www.runoob.com/try/try.php?filename=tryjquery_event_on_bind