on(events,[selector],[data],fn)

•events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
•selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
•data:当一个事件被触发时要传递event.data给事件处理函数。 
•fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

这样一个需求,如果用live()方法实现的话 非常简单,容易理解。

$('nav li, #sb-nav li, #help li').live('click', function () {
// code...
});

jquery在1.7版本后,建议大家用on方法代替之前的bind、live、delegate方法。
那上面一句如果用on的话,怎么写呢?

其实查看live源码就知道,live实际是委托doucment进行事件委派的。

按照这个思路,可以将on方法绑定到document即可。

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code...
});

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

$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, "td");

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

$(document).on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');

jquery on()方法绑定多个选择器,多个事件的更多相关文章

  1. jQuery事件之on()方法绑定多个选择器,多个事件

    这样一个需求,如果用live()方法实现的话 非常简单,容易理解. $('nav li, #sb-nav li, #help li').live('click', function () { // c ...

  2. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  3. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  4. jQuery on()方法绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  5. jQuery on()方法绑定动态元素的点击事件实例代码浅析

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  6. Jquery on方法绑定事件后执行多次

    每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });

  7. jQuery之方法绑定(事件注册)代码小结

    1.最直接的模式,直接将一个function对象传入方法函数,如下面的click(),好处坏处一看便知 $("#btnComfirmChooseCompany").click(fu ...

  8. jQuery clone()方法绑定事件

    先看如下代码: (function ($) { var div = $("<div></div>").css({width: "100px&quo ...

  9. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

随机推荐

  1. Code Rush插件

    code rush 是微软推出的一款VS2008上的插件.他有强大的文件和代码导航功能,易于访问的重构和代码创建功能.一组编辑器.选择.剪贴板工具等. 教程链接 http://www.devexpre ...

  2. gulp-nodemon 和 gulp-livereload 配置

    一.gulp 安装 1. 全局安装: npm install -g gulp 2. 安装在项目开发环境: npm install gulp --save-dev 二.gulp-nodemon 和 gu ...

  3. ACM 蛇形填数

    蛇形填数 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.例如n=4时方陈为:10 11 12 19 16 1 ...

  4. JavaScript进阶(二)

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  5. Codeforces Beta Round #7

    A题,应该是水题,我没看懂... B题,这题很多坑,注意x是LL,而且x = 0的情况,所以初始化要为-1,最后这题是内存管理啊..操作系统学的不好,题意读不懂啊. 申请内存的时候,是从头找 如果这一 ...

  6. 【bzoj2333】 [SCOI2011]棘手的操作 可并堆+lazy标记

    2016-05-31  21:45:41 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2333 (学习了黄学长的代码 有如下操作: U x y ...

  7. Command mvn jetty:run

    How to use the command mav jetty:run? There is a simple display as below: Step 1: You should generat ...

  8. Oracle 客户端免安装数据库连接

    PLSQL Developer 连接数据库需要安装Oracle客户端,在这里介绍一种Oracle客户端解压式安装,而不是exe安装. 安装步骤: 1:确定客户端安装所在主机的系统位数 2:选择正确的客 ...

  9. [LintCode] Sort Integers 整数排序

    Given an integer array, sort it in ascending order. Use selection sort, bubble sort, insertion sort ...

  10. GitHub上删除项目

    1. 在自己的repositories中,选择要删除的项目,左击. 2.  选择 [Settings] 3.  选择 [Delete ** ] 4.  在弹出框中 输入 要删除的项目名,点击下方的按钮 ...