jquery的on()方法用于事件委托，需指定已存在的父容器、子选择器和处理函数；它比bind()更高效，可替代live()并支持精准委托与可控解绑。
jQuery on方法怎么用
要在动态添加的元素上响应点击、输入等事件，又不想每次插入新DOM后重新绑定，就必须用.on()指定委托目标和子选择器。
第一步：确定事件委托的父容器——必须是已存在且不会被销毁的祖先元素，比如$('#container')或$(document)。【不能选将来会被remove()掉的临时包装层】
第二步：调用.on()，传入三个关键参数：事件类型字符串（如'click'）、子元素选择器（如'button.delete'）、处理函数。写法为：$('#list').on('click', 'li a', function(e) { console.log($(this).text()); });
第三步：如果要一次性绑定多个事件，把事件名用空格隔开即可，例如'on("mouseenter mouseleave", "img", handler)'；若需为不同事件配不同逻辑，改用对象写法：on({ click: fn1, keyup: fn2 })。
为什么推荐用on替代bind
bind()直接把事件挂到每个匹配元素上，页面有100个按钮就绑100次，内存占用高、性能差；而on()只在父级绑一次，靠事件冒泡+target匹配触发，节省资源。
直接替换很简单：把$('a').bind('click', fn)改成$('a').on('click', fn)，参数完全一致，无需改逻辑。
注意：如果原bind代码里用了event.data传参，on()中保持相同写法即可，data参数位置和含义完全兼容。
为什么on能彻底替代live
方法一：全局委托（最接近live行为）
把$(selector).live('click', fn)换成$(document).on('click', selector, fn)。live内部就是这么做的，但on让你能自主选择委托节点，不强制走document。
方法二：精准委托（更优实践）
比如列表项动态增删，别用$(document).on('click', '.item', fn)，改用$('#order-list').on('click', '.item', fn)——【委托到最近稳定父容器，避免深层冒泡损耗】
方法三：移除时更可控
live()绑定的事件只能用die()清除，而on()统一用off()：$('#list').off('click', '.item')可精确解绑某类委托，不会误伤其他逻辑。
