十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
一、作用不同
目前成都创新互联公司已为上千的企业提供了网站建设、域名、网页空间、网站托管、服务器托管、企业网站设计、蚌山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
1、on():在被选元素及子元素上添加一个或多个事件处理程序。
2、live():为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
二、触发条件不同
1、on():使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
2、live():通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
三、语法不同
1、on():$(selector).on(event,childSelector,data,function)childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
2、live():$(selector).live(event,data,function),其中event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
参考资料来源:百度百科-jQuery
.on()方法事件处理程序到当前选定的jQuery对象中的元素。
.on( events [, selector ] [, data ], handler(eventObject) )
events:类型: String
一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector:类型: String
一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。
data:类型: Anything
当一个事件被触发时,要传递给事件处理函数的event.data。
handler(eventObject):类型: Function()
事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false。
概述
1、#Grid1Table不是#conut的父节点,p标签是#logout的父节点
2、代码写法:
$('p').on('click', '#count', function() {
//function code here.
});
解析
1、p包裹a标签(id = logout),所以logout的父节点(父标签)为p(没有标注id或者class)
pa href='#' id='logout'【退出】/a/p
2、$("#logout").on('click',function() 方法要求参数为非随动变量(全局变量),所以#logout为不可行参数,且由于代码没有贴全所以这里我先断定#Grid1Table为非父节点,而p为#logout父节点,所以这里可以改成:
$('p').on('click', '#count', function() {
//function code here.
});
拓展内容
juqery on()方法详解
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
参数
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
jquery.on()超级方法
归纳
在jquery的on方法中实现事件委托就更简单了,on方法可以接受三个参数:
第一个参数是事件名,可以只绑定一个事件,如on('click'),也可以绑定多个事件,如on('click dbclick mouseover')等
第二个参数是可选参数,接受一个selector,当事件触发元素符合selector时,会调用事件处理函数
注:此处用到 li:even 选择器,后面有注解
第三个参数是自定义事件处理的回调函数。
1.jQuery :even 选择器
选取每个带有偶数 index 值的元素(比如 2、4、6)
index 值从 0 开始,所有第一个元素是偶数 (0)
2.jQuery :odd 选择器
选取每个带有奇数 index 值的元素(比如 1、3、5)
多个事件绑定同一个函数
$("button").on("mouseover mouseout",function(){
//dosomething
});
多个事件绑定不同函数
$("button").on({
mouseover:function(){ //dosomething },
mouseout:function(){ //dosomething },
click:function(){ //dosomething }
});