jquery on方法

最新推荐文章于 2025-10-18 09:20:01 发布
原创 最新推荐文章于 2025-10-18 09:20:01 发布 · 615 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

简介

jquery on从jquery1.7开始代替 bind/delegate/live，on用来给current element和further element添加event handler,翻译过来就是，可以用在现在的元素或者现在不存在，但是将来会创建的元素添加事件处理器。

实现原理

用在未来创建的元素上绑定事件，它是怎么实现的呢？
基本原理是绑定父元素（确保父元素存在），子元素当前不存在，利用冒泡机制，当点击子元素时，子元素身上没有绑定事件，但是父元素会受到事件通知，再进行匹配，从而执行事件

<div class="nav">
    <div class="item">
      已有的元素
    </div>
</div>

$(".nave").on("click",".item",function(event){

});

参考

使用jQuery的on()方法
2301_79326254的博客
09-27 181
jQuery是一个流行的JavaScript库，用于简化JavaScript代码的编写和操作HTML文档。方法，可以轻松地附加事件处理程序，并对动态添加的元素进行处理，为交互性丰富的网页开发提供了便利。方法用于为选定的元素附加一个或多个事件处理程序，并且可以动态地处理新添加到文档中的元素。在上面的示例中，当页面上的按钮被点击时，会弹出一个警告框显示"按钮被点击了！在上面的示例中，当按钮被点击时，会弹出一个警告框显示传递的额外数据。在上面的示例中，当鼠标进入或离开页面上的输入框时，会切换输入框的。
jQuery on方法传递参数示例
01-19
教你如何给 jQuery on方法绑定的函数传递参数，代码如下： 代码如下: $(“.loadingFlower”).on(“click”,”,{name:”123″,id:”234″,tel:”345″},callback)   function callback(event){  console.log(event...
jQuery on()方法
weixin_30765577的博客
02-12 524
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); ...
jQuery.on() 函数详解
chelen_jak的专栏
02-27 899
转自：http://www.365mini.com/page/jquery-on.htm on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
jQuery .on() 方法完全指南：终极事件处理大师
最新发布
weixin_42107409的博客
10-18 333
本文全面介绍了jQuery的.on()方法，帮助开发者掌握事件处理的核心功能。文章首先解释了.on()作为统一事件处理接口的优势，重点介绍了其事件委托机制，通过将处理器绑定在静态父元素上，实现对动态内容的支持并提升性能。随后详细解析了.on()的基础语法和高级用法，包括多事件绑定、数据传递等技巧。特别介绍了事件命名空间的使用，帮助开发者精准控制事件移除。最后通过一个动态待办事项列表的实战案例，展示了如何综合运用.on()的各种功能。本文适合所有jQuery开发者学习，帮助编写更高效、健壮的JavaScrip
jQuery的on方法
guoanyong的博客
04-22 690
jQuery中on方法的实现
Jquery on方法绑定事件后执行多次的解决方法
11-24
这两天工作中遇到使用js动态加载内容，同时需要对加入的内容绑定点击事件的，当时想想了想可以使用内联的onclick 来实现，后来没有这样做，使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现，on 对...
jQuery on()方法示例及jquery on()方法的优点
11-23
jQuery的on()方法是用于绑定事件处理程序的关键函数，它在jQuery 1.7版本引入，逐渐替代了之前的.bind(), .delegate(), 和 .live()方法。on()方法的强大之处在于它的灵活性和性能优化，它是现代jQuery应用中处理事件...
jQuery中on方法使用注意事项详解
10-20
在jQuery中，on方法是一个非常重要的事件处理函数，它用于在指定的元素上绑定事件处理器。本文将详细介绍使用jQuery中on方法时需要注意的几个关键点。 首先，on方法的定义如下：on(eventType,[childSelector],[data...
jQuery on()
归家落叶人
11-11 719
jQuery  bind()、delegate()、live()都是通过on()来实现， bind(): 会把所有的event handler加到全部的匹配的元素上，存在一些效率方面的问题 $('a').bind('click', function(){}); live(): 利用事件委托来处理事件的绑定。live()方法会绑定相应元素到你选元素的根元素上，调用live()之
jQuery之.on()方法
z69183787的专栏
05-04 3996
还不是完全清楚如何使用.on()进行jQuery事件绑定的同学先看这里http://api.jquery.com/on/ jQuery绑定事件的方法有几种，推荐使用.on()方法绑定，原因有两点： 1.on()方法可以绑定动态添加到页面元素的事件 比如动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。有的同学可能习惯
jquery on（）事件
qq_33352505的博客
07-20 533
jquery的绑定事件是会遍历已经存在的元素，然后对其进行事件绑定。因此这样就导致了一个问题，对于动态添加的元素原本写好的jquery的事件无法对其进行绑定。那么解决方案就是on（）事件，它分为多种状态，下面罗列了其支持的事件委托： blur focus focusin focusout load resize scroll unload click dblclick mou
jquery转载
onOneLight的博客
01-21 645
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。 on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之...
jQuery on, live,bind 等方法通过参数 data 传值给 function
踏歌长行的博客
06-03 3352
 jQuery on, live,bind 等方法通过参数 data 传值给 function，例子如下 $("#txtDomain1").live("keyup", "a", syncData);function syncData(eventObject) { var a = eventObject.data; }
jQuery on() 方法详解（二）
小杜的一搏
03-28 2225
接上篇jQuery on() 方法详解（一）The event handler and its environment（事件处理程序和它的环境）handler参数必须是一个函数（或false值，见下文）， 除非你传递一个对象给events参数。 您可以提供一个匿名处理函数给.on()调用，就像上面例子中的用法，或者可以声明一个函数，然后再将该函数名作为参数：function notify() {
Jquery的on()方法使用
RinSing
04-01 7016
此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。 语法结构一: $(selector).on(events,[selector],[data],fn) events：一个或多个用空格分隔的事件类型和可选的命名空间。 selector：可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到...
jQuery on() 方法问题
12-07 141
<!DOCTYPE html><html><head><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script> function f1(i){ alert("段落被点击了。"+i.data.this);...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值