jquery on()方法绑定多个选择器,多个事件
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()方法绑定多个选择器,多个事件的更多相关文章
- jQuery事件之on()方法绑定多个选择器,多个事件
这样一个需求,如果用live()方法实现的话 非常简单,容易理解. $('nav li, #sb-nav li, #help li').live('click', function () { // c ...
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery on()方法绑定动态元素的点击事件实例代码浅析
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- Jquery on方法绑定事件后执行多次
每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });
- jQuery之方法绑定(事件注册)代码小结
1.最直接的模式,直接将一个function对象传入方法函数,如下面的click(),好处坏处一看便知 $("#btnComfirmChooseCompany").click(fu ...
- jQuery clone()方法绑定事件
先看如下代码: (function ($) { var div = $("<div></div>").css({width: "100px&quo ...
- jQuery绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...
随机推荐
- android-async-http cancelRequests
github地址:https://github.com/loopj/android-async-http 使用上:官方建议使用一个静态的AsyncHttpClient: 1.AsyncHttpClie ...
- MathType的公式在word中跟文字不对齐
引用http://blog.sina.com.cn/s/blog_4d1f40c00100net8.html 部分Mathtype公式与文档文字没有很好的对齐,而是浮起来了,也就是说Mathtype公 ...
- NOI模拟赛Day5
T1 有and,xor,or三种操作,每个人手中一个数,求和左边进行某一种运算的最大值,当t==2时,还需要求最大值的个数. test1 20% n<=1000 O(n^2)暴力 test2 2 ...
- Bootstrap整合ASP.NET MVC验证、jquery.validate.unobtrusive
没什么好讲的,上代码: (function ($) { var defaultOptions = { validClass: 'has-success', errorClass: 'has-error ...
- Java 仿迅雷多线程下载
package net.webjoy.jackluo.android_json; /** * 1.http Range "bytes="+ start+end * 2.Random ...
- NodeJS优缺点及适用场景讨论
概述:NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一. N ...
- Hadoop.2.x_简单的测试文件读取与上传
代码如下, 后备参考: package com.bigdata.hadoop.hdfs; import java.io.File; import java.io.FileInputStream; im ...
- javax.el.PropertyNotFoundException: 异常处理
javax.el.PropertyNotFoundException: Property 'policyId' not found on type com.omhy.common.model.enti ...
- css重新认识(2)
1)行内元素可以用margin-left与margin-right调整位置,但用margin-top与margin-bottom来调整位置不会有效果,只有具有block属性值后才能像块级元素般被外边距 ...
- jQuery设计思想之取值和赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...