jQuery()中,on()方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery()中,on()方法相关的知识,希望对你有一定的参考价值。

1.7以后,live()方法就被on()方法替代了,我用php+jQuery+Ajax做了一个用户登录界面,初始的时候没有

<p><a href='#' id='logout'>【退出】</a></p>这个按钮,是在点击登录以后出来的,现在想写一个$("#logout").on('click',function()这个方法,但是根据定义:
$('#Grid1Table').on('click', '#count', function()
//function code here.
);
#Grid1Table是#count的父节点以上的节点
问该怎么写,#logout有父节点嘛?求代码

概述

1、#Grid1Table不是#conut的父节点,p标签是#logout的父节点

2、代码写法:

$('p').on('click', '#count', function()
//function code here.
);

解析

1、p包裹a标签(id = logout),所以logout的父节点(父标签)为p(没有标注id或者class)

<p><a 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            可选。规定当事件发生时运行的函数。    

参考技术A $("#logout").on('click',function());

也是可以的。不过有个限制,你的这个$("#logout"),不能是后期动态添加的节点。

如果像表格里动态添加的行,要使用事件,就要用下面你说的方法。

$('#Grid1Table').on('click', '#count', function()
//function code here.
);

#logout有父节点嘛?当然有。

<p><a href='#' id='logout'>【退出】</a></p>

p就是父节点。

$('p').on('click', '#count', function()
//function code here.
);本回答被提问者采纳
参考技术B on的用法:
.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。

.on()方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理的所有功能。要删除的.on()绑定的事件,使用.off()。要绑定一个事件,并且只运行一次,然后删除自己, 使用.one()

jquery使用on()方法绑定的事件被执行多次的问题

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。

本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。

简单还原一下问题的场景

这里简单还原一下问题的场景,使用一个按钮给另一个按钮通过on()方法绑定事件。

HTML的部分

<input id="bindEventBtn" type="button" value="给按钮绑定事件的按钮" />
<input id="noEmotionBtn" type="button"  value="我是一个莫得感情的按钮" />

JavaScript的部分

$(function(){
    $(‘#bindEventBtn‘).click(function () {
        $(‘#noEmotionBtn‘).on(‘click‘, function () {
            alert(‘我是一个莫得感情的按钮‘);
        });
    });
})

这样,当多次点击bindEventBtn按钮,就会将同一个事件多次绑定到noEmotionBtn按钮上。

而on()方法的一个特性是绑定了多少次就触发多少次的,这就是问题所在。

问题的解决方法

解决问题的方法有两个,大体就是对重复绑定的事件进行解绑。

1.使用off()方法解绑。

$(‘#noEmotionBtn‘).off(‘click‘).on(‘click‘, function () {
    alert(‘我是一个莫得感情的按钮‘);
});

2.使用unbind()方法解绑。

$(‘#noEmotionBtn‘).unbind(‘click‘).on(‘click‘, function () {
    alert(‘我是一个莫得感情的按钮‘);
});

总结

实际的场景可能会复杂得多,因此在使用on()方法给元素绑定事件的时候要格外注意多次重复绑定的问题。

但是解决问题的大体思路是一样的,建议是统一先使用off()方法去解绑事件,避免出错。

当然了,最好是从根源上找到问题,也就是避免多次绑定事件的事情发生。

另外的,如果要给一个元素在多个地方绑定不同的事件处理函数的话,可能就要另外想想办法了。

 

"当一个人用心去创造一样东西时,它便有了灵魂。"

以上是关于jQuery()中,on()方法的主要内容,如果未能解决你的问题,请参考以下文章

jquery on高级用法

jquery on()方法重复绑定解决方法

jQuery on()方法

jquery + handsontable:没有方法'on' [关闭]

jQuery .on()方法

jQuery中的事件方法,使用on()代替live()