×

jQuery on()方法绑定多个选择器以及多个事件

作者:Terry2014.07.02来源:Web前端之家浏览:25009评论:1
关键词:JQuery选择器

jQuery绑定事件大家应该很熟悉了。jquery在1.7版本后,建议大家用on方法代替之前的bind、live、delegate方法。这样一个需求,如果用live()方法实现的话 非常简单,容易理解。

  1. $('nav li, #sb-nav li, #help li').live('click', function () {   

  2.     // code...   

  3. });  

其实查看live源码就知道,live实际是委托doucment进行事件委派的。
按照这个思路,可以将on方法绑定到document即可。

  1. $(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {   

  2.      // code...   

  3.  });  

还有一种情况,on()方法绑定多个事件,可以这样写:

  1. $("table.planning_grid").on({   

  2.     mouseenter: function() {   

  3.         // Handle mouseenter...   

  4.     },   

  5.     mouseleave: function() {   

  6.         // Handle mouseleave...   

  7.     },   

  8.     click: function() {   

  9.         // Handle click...   

  10.     }   

  11. }, "td");  

最后,用on()方法绑定多个选择器,多个事件则可以这样写:

  1. $(document).on({   

  2.     mouseenter: function() {   

  3.         // Handle mouseenter...   

  4.     },   

  5.     mouseleave: function() {   

  6.         // Handle mouseleave...   

  7.     },   

  8.     click: function() {   

  9.         // Handle click...   

  10.     }   

  11. }, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');  

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/jQuery-on.html

网友评论文明上网理性发言已有1人参与

发表评论:

评论列表

  • 詹先生詹先生 发布于 2014-10-16 15:22:46  回复该评论
  • 招聘高级JS前端工程师,要求5年以上经验。有意者加企鹅号2281440900,坐标:北京。北京 啊 北京啊