首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

on()上的JQuery不在附加的元素上触发

on()是jQuery中的一个方法,用于为指定的元素添加一个或多个事件处理程序。

在jQuery中,on()方法可以用于附加事件处理程序到现有的元素上,也可以用于动态添加事件处理程序到新创建的元素上。

当使用on()方法时,可以通过选择器指定要附加事件处理程序的元素。如果选择器匹配多个元素,事件处理程序将被附加到每个匹配的元素上。

例如,如果要为所有的按钮元素添加点击事件处理程序,可以使用以下代码:

代码语言:txt
复制
$("button").on("click", function() {
  // 点击事件处理程序的代码
});

在这个例子中,选择器"button"将匹配所有的按钮元素,并为每个按钮元素附加一个点击事件处理程序。

on()方法还可以接受多个事件类型和处理程序。例如,可以同时为元素的点击事件和鼠标移入事件添加处理程序:

代码语言:txt
复制
$("button").on("click mouseenter", function() {
  // 点击事件和鼠标移入事件的处理程序代码
});

除了事件类型和处理程序,on()方法还可以接受其他参数,如命名空间、数据和事件委托。

总结起来,on()方法是jQuery中用于为元素添加事件处理程序的方法,可以通过选择器指定要附加事件处理程序的元素,可以同时指定多个事件类型和处理程序。它是jQuery中常用的方法之一,用于实现交互和动态效果。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery源码研究:jQuery原型对象属性方法()

jQuery对象作为构造函数,在其原型定义了一些属性和方法,同时其原型也被指向jQuery对象属性fn上面。...toArray方法:返回一个包含jQuery对象集合中所有DOM元素数组。这个方法不接收任何参数。所有匹配DOM节点都会包含在一个标准数组中。...,否则就返回所有匹配元素数组 1jQuery.prototype = { 2 get: function(num) { 3 //返回所有元素数组 4 if(...通过this把老jQuery原型对象挂载到新建ret对象prevObject属性云,这可以看作是jQuery对象一个引用吧 7 ret.prevObject = this;...这个方法其实作用就是把元素集合添加到一个新对象中,并且这个对象还具有jQuery对象引用,所以也就是具有jQuery对象所有方法和属性,链式调用起来妥妥呀。

1.1K40

angularJS之站在jQuery肩膀

jQuery由一小撮对浏览器极其熟稔极客负责抹平不同浏览器差异,其他开发 者只需要基于jQuery进行开发,可以更好地关注业务实现,而不是把时间花在 适配不同浏览器。...开发者需要API都挂接在这个对象。 它其实是一个类工厂,负责将指定DOM对象转化为jquery对象。...jQuery是一个库,库总是被动,就像工具,应用开发逻辑是你,在 某一点需要用一下工具,就用好了。...) - 获得元素对应作用域对象 isolateScope() - 获得元素对应隔离作用域对象,如果有的话。...扩展事件 jqLite还提供一个$destroy事件,当DOM对象被从DOM树删除时,AngularJS将触发 这个事件,以便指令进行一些善后清理工作。

86910

jquery中动态新增元素节点无法触发事件解决办法

在使用jquery中动态新增元素节点时会发现添加事件是无法触发,我们下面就为各位来详细介绍此问题解决办法.   ...),想必后面通过ajax加载进来列表中回复按钮,点击事件会失效。   ...其实最简单方法就是直接在标签中写onclick="",但是这样写其实是有点low,最好方式还是通过给类名绑定一个click事件。...解决jquery中动态新增元素节点无法触发事件问题有两种解决方法,如下: 方法一:使用live   live()函数会给被选元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行函数。...通过live()函数适用于匹配选择器的当前及未来元素。比如,通过脚本动态创建元素

1.7K20

jQuery源码研究:jQuery对象及原型extend()方法

,如果附加对象被传递给这个方法将那么它将接收新属性,如果它是唯一参数将扩展jQuery命名空间; 后面的object1到objectN同样作为对象,包含额外属性合并到第一个参数。...return target; } 在jQuery对象添加extend属性,并且在jQuery.fn上面也添加同样extend属性,还记得前面jQuery.fn = jQuery.prototype...jQuery对象fn属性指针就指向jQuery对象原型,并且因为对象都是引用类型,所以上例代码操作意思就是:在jQuery对象和它原型对象都添加extend方法,该方法最后返回是一个合并处理后对象...在jQuery对象绑定extend()和jQuery.fn绑定extend()方法其实是不同,前者是类方法,是静态方法,调用方法写作$.extend();后者是实例方法,是成员方法,调用方法写作...jQuery.fn即原型对象添加extend()方法代码解释,再复习下:jQuery对象和其原型都具有extend()方法,区别在于一个是类方法,一个是成员方法,在使用场景请注意。

92630

jQuery源码研究:jQuery原型对象属性方法(下)

接昨天jQuery原型属性方法部分。 each()方法:为每个匹配元素集合执行回调函数,是一个jQuery遍历方法。...}) 注意,$('li')是jQuery构造函数实例对象,凡是jQuery对象原型方法,在实例对象中都可以被访问到。...至于this.pushStack()方法中参数,可以明显看到它是jQuery构造对象定义了一个方法map,该方法内部具体实现尚未可知,因为还没读到那部分,但看参数传递可以大概知道,将新创建元素集合和对新集合进行处理回调函数传入进去了...( 0 ); }, last: function() { return this.eq( -1 ); }, } 都是调用jQuery原型对象eq()方法...最后个end()方法,其功能解释API上说:结束当前链条中最近筛选操作,并将匹配元素集还原为之前状态。

85950

GitHub10个有趣开源小游戏(附加在线演示)

前言 GitHub作为程序员们开源宝库,有着很多非常好项目。对于初学者来说,游戏有着一种特殊魅力。今天统计了GitHub比较有趣10个开源小游戏,其中有许多可以称之为经典。...《吃豆人》算是比较经典游戏了,笔者小时候并没有接触过这个游戏,最初接触还是在迪士尼动画电影《无敌破坏王》中认识到。...这款游戏同笔者小时候玩,在玩法十分相似。...这个项目作者在画面上很好还原原作,但是在操作稍微有些反应迟钝: 9、2048 项目演示地址: https://play2048.co/ GitHub项目链接: https://github.com...这个项目用数字取代了图片,玩法和拼图游戏是一样,还是十分有趣

2.9K20

jquery操作元素位置

.offset()   在匹配元素中,获取第一个元素的当前坐标,或设置每一个元素坐标,坐标相对于文档。   .offset() 这个不接受任何参数。     ...() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素偏移位置。...+ position.left + ", top: " + position.top ); .scrollLeft()   获取匹配元素集合中第一个元素的当前水平滚动条位置或设置每个匹配元素水平滚动条距离....scrollLeft(value)     设置每一个匹配元素水平滚动条距离。   ...$("div.demo").scrollLeft(300); .scrollTop()   获取匹配元素集合中第一个元素的当前垂直滚动条位置或设置每个匹配元素垂直滚动条距离。

3.3K60

解决innerHtml 在Jquery使用无效果问题

' + loadTime + 'ms'); innerHTML在JQuery中使用的话是无效果JQuery提供了三种方法实现指定标签赋内容:.html(),.val(),.text()。...三种方法区别具体: .html()用为读取和修改元素HTML标签 对应js中innerHTML .html()是用来读取元素HTML内容(包括其Html标签), .html()方法使用在多个元素时...对应js中innerText text()用来读取元素纯文本内容,包括其后代元素;.text()方法不能使用在表单元素 .val()用来读取或修改表单元素value值 .val()是用来读取表单元素..."value"值,.val()只能使用在表单元素 关于三者区别 .val()方法和.html()相同,如果其应用在多个元素时,只能读取第一个表单元素"value"值,但是.text()和他们不一样...,如果.text()应用在多个元素时,将会读取所有选中元素文本内容。

35910

jQuery中不同元素作用

outerWidth() outerHeight() jQuery 遍历 jQuery 遍历,意为“移动”,用于根据其相对于其他元素关系来“查找”(或选取)HTML 元素。...以某项选择开始,并沿着这个选择移动,直到抵达您期望元素为止。 向上遍历 DOM 树 parent() - 返回被选元素直接父元素。...向下遍历 DOM 树 children()- 返回被选元素所有直接子元素。 find()- 返回被选元素后代元素,一路向下直到最后一个后代。...noConflict() 方法 jQuery 使用 符号作为jQuery简写。如果其他JavaScript框架也使用 符号作为简写怎么办?...当然,您仍然可以通过全名替代简写方式来使用 jQuery: var jq = $.noConflict(); jq(document).ready(function(){ jq("button")

1.7K00

jQuery 查找on事件绑定元素被绑定元素方法

jQuery 查找on事件绑定元素被绑定元素方法 遇到问题 今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...){ $(this) }); 如上代码,当我点击这个图片时候 $(this) 是指 img ....当然这是正确. 而我需要找到 $box 也就是 img 父级. 如果不是插件的话,我当然可以根据它ID或者CLASS来进行查询.问题是,我是写插件,也就是说,我并不知道它这些信息是什么....解决方法 很多基础东西不理解,就会出现我这样问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一父级被绑定元素了.

4.5K10

react-native flatlist 拉加载onEndReached方法频繁触发问题

问题 在写flatlist复用组件时,调用时候如果父组件是不定高组件,会造成组件无法显示 如果父组件样式{flex:1},则会出现下拉方法频繁触发或不正常触发问题(我这里出现问题是在列表第6个项目在底部时...,缓慢拉会多次触发flatlistonEndReached监听) 原因 推测是因为{flex:1}不适合做动态高度组件父组件样式,会错误判断高度导致onEndReached多次不正常触发。...解决 可以把列表上方所需组件做成header属性传入组件当做flatlist头部组件,这样就可以直接调用封装好组件。...也可以把父元素样式设成{height: '100%'},这样就可以正确触发onEndReached监听。

3.1K20

MultiButton事件触发型按键驱动模块在高云FPGA移植

前两篇文章介绍了letter-shell串口终端和cmd-parse串口命令解析器在高云FPGA GW1NSR-4C SoC移植: letter-shell串口终端在高云FPGA移植 cmd-parser...串口命令解析器在高云FPGA移植 本文介绍一个非常简单、功能强大按键驱动模块MultiButton在高云FPGA移植。...支持多种按键触发方式: PRESS_DOWN,按键按下,每次按下都触发 PRESS_UP,按键弹起,每次松开都触发 PRESS_REPEAT,重复按下触发,变量repeat计数连击次数 SINGLE_CLICK...用于处理不同触发条件下响应,这里为了演示,是打印对应字符串: void button_callback(void *button) { PressEvent event = get_button_event...{ cnt_1ms++; TIMER_ClearIRQ(TIMER0); } } 这样就完成了MultiButton在高云GW1NSR-4C FPGA移植

58630

使用 Python 对相似索引元素记录进行分组

在 Python 中,可以使用 pandas 和 numpy 等库对类似索引元素记录进行分组,这些库提供了多个函数来执行分组。基于相似索引元素记录分组用于数据分析和操作。...在本文中,我们将了解并实现各种方法对相似索引元素记录进行分组。 方法一:使用熊猫分组() Pandas 是一个强大数据操作和分析库。...我们遍历了分数列表,并将主题分数对附加到默认句子中相应学生密钥中。生成字典显示分组记录,其中每个学生都有一个科目分数对列表。...语法 list_name.append(element) 在这里,append() 函数是一个列表方法,用于将元素添加到list_name末尾。它通过将指定元素添加为新项来修改原始列表。...groupby() 函数根据日期对事件进行分组,我们迭代这些组以提取事件名称并将它们附加到 defaultdict 中相应日期键中。生成字典显示分组记录,其中每个日期都有一个事件列表。

19330

JQuery 遍历被选中checkbox元素

https://blog.csdn.net/u011415782/article/details/78819667 需求 在一个简单Html页面中,我需要读取所有被选中checkbox...元素所在区域某一元素值(举例下拉框weight值)总和 框架 :ThinkPHP 3.2.3 Ⅰ. html 源代码 如下代码只是其中一部分 <li class="li-user-addr...Js 代码编写/实现 var allWeight = 0; //TODO 取出所有被选中<em>的</em> checkbox <em>元素</em> var cb_checked = $('.cb_addr:checked'); var...cblen = cb_checked.length; if (cblen == 0){ //如果没有选中<em>的</em><em>元素</em> alert('请选择要分配<em>的</em>地址'); }else { //TODO...附录 参考文章: <em>jquery</em>选择器 之 获取父级<em>元素</em>、同级<em>元素</em>、子<em>元素</em>

2.1K30

JQuery 遍历:发现元素魔法之旅

欢迎来到 JQuery 奇妙世界,一个充满活力和灵感地方。在这个世界里,我们将一起探讨 JQuery 遍历功能,这是一个让你轻松发现和操作网页元素神奇工具。...这就是 JQuery 遍历用武之地。遍历不仅仅是寻找元素,更是发现元素之美的一种方式。在这篇博客中,我们将深入研究 JQuery 遍历方方面面,让你在前端道路上越走越远。...遍历基础在 JQuery 中,遍历主要通过选择器和遍历方法实现。首先,我们来看一下基础选择器。1. 元素选择器元素选择器是最简单一种选择器,通过元素标签名选择对应元素。...这些基础选择器让我们能够准确地选取页面上元素,但有时候我们需要更灵活方式来定位元素。这时就需要使用 JQuery 遍历方法。...通过 siblings() 方法,获取了这些元素兄弟元素,并给兄弟元素添加了一个类名和文字内容。遍历艺术JQuery 遍历方法就像艺术家画笔,让你能够在页面上自由地漫游,发现元素美丽和奥秘。

18211
领券