Jquery1.7+之后绑定事件on()方法各类案例详解

Jquery绑定事件后很多中方式bind()、live()、delegate()、on(),实际应用中比较推荐采用on()的方式去处理,具有较高的自定义组合能力,本文对on()详解

Jquery1.7+之后绑定事件on()方法各类案例详解

所属分类: WEB
专题标签: Jquery 事件 方法

关于on()方法

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品。
on()方法带来很多便利,应用过程中推荐使用该方法,简化了Jquery代码库。
on()方法添加的事件处理程序适用于当前及未来的元素(比如动态创建的元素)。
如需移除事件处理程序,请使用 off() 方法。
如需添加只运行一次的事件然后移除,请使用 one() 方法。
Jquery中bind()、live()、delegate()和on()之间的区别一文中详细阐述了各方法的优缺点。

方法参数

  1. $(selector).on(event,childSelector,data,function)
  2. //selector(必须)元素选择器(必须)
  3. //event(必须)绑定事件,支持多个事件(空格分隔多个事件值,也可以是数组)
  4. //childSelector(选用)子元素选择器
  5. //data(选用)传递到函数的额外数据
  6. //function(选用)事件发生时运行的函数

基本实例

  1. $(document).ready(function(){
  2. //一般情况下on用于页面dom初始化完成进行绑定
  3. //支持绑定动态产生的节点
  4. $("p").on("click",function(){
  5. alert("段落被点击了。");
  6. });
  7. });

组合实例

  1. //绑定点击事件
  2. $("p").on("click",function(){
  3. alert("段落被点击了。");
  4. });
  5. //绑定多个事件1
  6. $("p").on("click change",function(){
  7. alert("段落被点击或修改。");
  8. });
  9. //绑定多个事件2
  10. $("p").on(["click","change"],function(){
  11. alert("段落被点击或修改。");
  12. });
  13. //绑定子元素
  14. $("p").on("click","span",function(){
  15. alert("段落的SPAN子元素被点击了。");
  16. });
  17. //绑定传递参数
  18. $("p").on("click","span",{"name":123},callBack);
  19. function callBack(e)
  20. {
  21. alert("接受参数:"+event.data.name);
  22. }

结尾小结

Jquery中的.on(“click”)和.click()二者在绑定静态控件时没有区别。
但是如果面对动态产生的控件,只有on()能成功的绑定到动态控件中。

  1. $("#add").click(function(){
  2. $(".li").append('<li>动态添加元素on<button class="del">del</button></li>');
  3. });
  4. //无法绑定成功
  5. $(".del").click(function(){
  6. $(this).parent().remove();
  7. });
  8. //可以绑定并触发
  9. $(".li").on(“click“, ".del", function(){
  10. $(this).parent().remove();
  11. })