当前位置： 首页 > news >正文

jQuery如何获取动态添加的元素

news 2026/3/31 15:11:57

jQuery如何获取动态添加的元素

  1. 使用 on()方法

    本质上使用了事件委派，将事件委派在父元素身上

    自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品，但是由于on()方法必须有事件，没有事件时可选择delegate()；

下例为选项卡：
父元素： .main .left
子元素： li

$("父元素").on("click","子元素",function(){var index=$(this).index();$(".main .right").find('li').css({"background":"#F4F4F4","color":"#333"});$(this).css({"background":"#fff","color":"#46c6ff"});$(".main .left").find('li').hide();$(".main .left").find('li').eq(index).show();
});

  1. on()可以获取动态元素，必须有事件

    delegate() 可以获取动态元素，可以没事件

    live() 可以获取动态元素，jQuery 1.9已弃用，必须有事件

    bind() 只能获取静态元素，不能获取动态元素，必须有事件

一、问题描述

用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。

二、解决方法

度娘推荐的方法基本是用live()方法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

live()的详细使用方法可以查看jQuery live()

live()和bind()的区别就是live不仅可以给页面中现有的元素绑定事件，还可以给将来动态添加进来的元素绑定事件。

于是我用live()替换了bind(),但报出了新错误：TypeError: $(…).live is not a function

经过查询以后发现，原来是jQuery 1.9及其以上已经无法使用live（），可以用on()方法代替live().

on()的官方定义和用法:

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

在这里插入图片描述

on()的详细使用方法可以查看jQuery on()

三、代码演示
html页面：


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>jQuery on()方法测试</title>
</head>
<body>
<button id="click1">Click me!</button>
<p>Hello,</p>
<script src="js/jquery.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>

test.js：


$().ready(function(){$("#click1").bind("click",function(){$("p").append("<div class='new'><b>I'm clicked!</b></div>");});//on方法要先找到原选择器（p),再找到动态添加的选择器（.new)$("p").on("click",".new",function(){$(this).remove();});
});

test.js中第6行实现了为动态添加的.new元素绑定click事件。应注意的是，虽然是为.new绑定事件，但on()方法却是绑定在原选择器

上的，然后将.new放在了参数列表中，原理参照上文on()的官方定义和用法。

相关文章：

jQuery如何获取动态添加的元素

jQuery如何获取动态添加的元素 使用 on()方法 本质上使用了事件委派&#xff0c;将事件委派在父元素身上 自 jQuery 版本 1.7 起&#xff0c;on() 方法是 bind()、live() 和 delegate() 方法的新的替代品&#xff0c;但是由于on()方法必须有事件&#xff0c;没有事件时可选择de…...

编程日记 2023/8/1 19:24:36

Keepalived 在CentOS 7安装并配置监听MySQL双主

keepalived安装 MySQL双主配置请看这里&#xff1a;https://tongyao.blog.csdn.net/article/details/132016200?spm1001.2014.3001.5502 128、129两台服务器安装步骤相同&#xff0c;配置文件不同&#xff0c;下面有介绍。 1.安装相关依赖包&#xff0c;并下载keepalived安…...

编程日记 2023/8/1 19:23:34

深度学习，神经网络介绍

目录 1.神经网络的整体构架 2.神经网络架构细节 3.正则化与激活函数 4.神经网络过拟合解决方法 1.神经网络的整体构架 ConvNetJS demo: Classify toy 2D data 我们可以看看这个神经网络的网站&#xff0c;可以用来学习。 神经网络的整体构架如下1&#xff1a; 感知器&…...

编程日记 2023/8/1 19:22:32

中国AI大模型峰会“封神之作”！开发者不容错过这场夏季盛会

年度最强大模型顶会来袭&#xff01;喊话中国数百万AI开发者&#xff0c;速来&#xff01; 硬核来袭&#xff01;中国AI大模型峰会“封神之作”&#xff0c;开发者们不容错过! 前瞻大模型发展趋势&#xff0c;紧跟这场大会&#xff01; 中国科技超级碗&#xff0c;大模型最新前…...

编程日记 2023/8/1 19:21:31

Android Studio多渠道打包

使用环境&#xff1a; Android studio 多渠道打包 使用方法&#xff1a; 1 APP下build.gradle文件 flavorDimensions "default"productFlavors {huawei {dimension "default"manifestPlaceholders [ channel:"huawei" ]}xiaomi {dimension &…...

编程日记 2023/8/1 19:20:30

RK3566 Android11默认客户Launcher修改

前言 客户需要默认自己的Launcher为home，同时保留系统的Launcher3. 解决办法：在启动home应用之前设置一下默认Launcher。查找home app启动相关资料，找到了frameworks/base/services/core/java/com/android/server/wm/RootWindowContainer.java的startHomeOnTaskDisplayA…...

编程日记 2023/8/1 19:19:27

ORB算法在opencv中实现方法

在OPenCV中实现ORB算法&#xff0c;使用的是&#xff1a; 1.实例化ORB orb cv.xfeatures2d.orb_create(nfeatures)参数&#xff1a; nfeatures: 特征点的最大数量 2.利用orb.detectAndCompute()检测关键点并计算 kp,des orb.detectAndCompute(gray,None)参数&#xff1a…...

编程日记 2023/8/1 19:18:26

vue项目回显文本无法识别换行符

解决方法 1&#xff1a;使用<br/>替换文本中的\n&#xff0c;使用v-html渲染 <template> <div v-html"str"></div> </template> <script> let str 以下内容自动换行\n换行了 // 使用replace截取提换 this.str str.replace(/…...

编程日记 2023/8/1 19:17:25

Minio 部署

minio 官网&#xff1a;https://www.minio.org.cn/ 部署文档&#xff1a;https://www.minio.org.cn/docs/minio/container/operations/install-deploy-manage/deploy-minio-single-node-single-drive.html# 选择自己的部署环境&#xff1a; 我用的docker: docker pull qua…...

编程日记 2023/8/1 19:16:24

Kafka系列之：记录一次Kafka Topic分区扩容，但是下游flink消费者没有自动消费新的分区的解决方法

Kafka系列之：记录一次Kafka Topic分区扩容，但是下游flink消费者没有自动消费新的分区的解决方法 一、背景二、解决方法三、实现自动发现新的分区一、背景 生产环境Kafka集群压力大，Topic读写压力大，消费的lag比较大，因此通过扩容Topic的分区，增大Topic的读写性能理论上下…...

编程日记 2023/8/1 19:15:23

Ansible部署MariaDB galera集群(多主)

文章目录 Ansible部署MariaDB galera集群(多主)介绍节点规划基础环境准备编写剧本文件执行剧本文件查看集群状态测试 Ansible部署MariaDB galera集群(多主) 介绍 MariaDB Galera集群是一套基于同步复制的、多主的MySQL集群解决方案&#xff0c;使用节点没有单点故障&#xff…...

编程日记 2023/8/1 19:14:20

立体库-库龄

split 用法第一种&#xff1a; 1.对单个字符进行分割&#xff08;注意这里是字符&#xff0c;不是字符串&#xff0c;故只能用单引号‘’&#xff09; string sabcdeabcdeabcde; string[] sArrays.Split(c) ; foreach(string i in sArray) Console.WriteLine(i.ToString());…...

编程日记 2023/8/1 19:13:19

extern/头文件包含，实现一个函数被两个文件共用

目录 一、extern 1、在a.c文件中定义int add函数 2、在b.c文件中使用extern关键字声明add函数 二、用头文件包含的形式 1、在a.c文件中定义int add函数 2、创建一个名为a.h的头文件&#xff0c;其中包含add函数的函数原型 3、在b.c文件中包含a.c的头文件&#xff0c;并调…...

编程日记 2023/8/1 19:12:09

pgsql 查看某个表建立了那些索引sql

执行以下sql&#xff1a; SELECTns.nspname as schema_name,tab.relname as table_name,cls.relname as index_name,am.amname as index_type,idx.indisprimary as is_primary,idx.indisunique as is_unique FROMpg_index idx INNER JOIN pg_class cls ON cls.oididx.indexrel…...

编程日记 2023/8/1 19:11:03

【SCSS】网格布局中的动画

效果 index.html <!DOCTYPE html> <html><head><title> Document </title><link type"text/css" rel"styleSheet" href"index.css" /></head><body><div class"container">&l…...

编程日记 2023/8/1 19:09:53

Docker基础命令(一)

Docker使用1 一、运行终端 打开终端&#xff0c;输入docker images &#xff0c;如果运行正常&#xff0c;表示docker已经可以在本电脑上使用了 二、docker常用命令 指令说明docker images查看已下载的镜像docker rmi 镜像名称:标签名删除已下载的镜像docker search 镜像从官…...

编程日记 2023/8/1 19:08:52

django4.2 day1Django快速入门

1、创建虚拟环境 打开cmd安装virtualenv pip install virtualenvwrapper-winworkon 查看虚拟环境mkvirtualenv 创建新的虚拟环境删除虚拟环境 rmvirtualenv 进入虚拟环境 workon env 2、创建django虚拟环境并安装django 创建虚拟环境mkvirtualenv django4env进入虚拟环境安…...

编程日记 2023/8/1 19:07:50

linux的exec和system函数介绍及选择

在应用程序中有时候需要调用第三方的应用&#xff0c;这是常见的需求。此时可以使用linux下的exec命令或system命令达到目的。但是这两个该选择哪个呢&#xff1f;有什么区别&#xff1f;下面总结介绍下。 exec和system介绍 在Linux中&#xff0c;exec命令用于在当前进程中执行…...

编程日记 2023/8/1 19:06:49

150行代码写一个Qt井字棋游戏

照例先演示一下: QT井字棋游戏&#xff0c;可以悔棋。 会在鼠标箭头处跟随一个下棋方的小棋子图标。 棋盘和棋子是自己画的&#xff0c;可以自行在对应的代码处更换自己喜欢的图片&#xff0c;不过要注意尺寸兼容。 以棋会友&#xff1a; 井字棋最关键的就是下棋了&#xf…...

编程日记 2023/8/1 19:05:48

k8s概念-controller

Controller作用和分类 controller用于控制pod 参考: 工作负载资源 | Kubernetes 控制器主要分为: Deployments 部署无状态应用&#xff0c;控制pod升级,回退 ReplicaSet 副本集,控制pod扩容,裁减 ReplicationController(相当于ReplicaSet的老版本,现在建议使用Deployments…...

编程日记 2023/8/1 19:04:46

别再手动埋点了！用OpenTelemetry Operator在K8s里给Java应用自动注入链路追踪（附完整YAML）

零代码改造&#xff1a;OpenTelemetry Operator在K8s中实现Java应用全自动观测 当微服务架构遇上云原生环境&#xff0c;可观测性成为工程团队的生命线。但传统埋点方案需要侵入业务代码、增加维护成本&#xff0c;这与快速迭代的DevOps理念背道而驰。本文将揭示如何通过OpenTe…...

编程新知 2026/3/31 15:04:34

DataX限速配置避坑指南：搞懂channel、byte和record参数，让你的数据同步又快又稳

DataX性能调优实战&#xff1a;深度解析限速参数配置与避坑策略 凌晨三点&#xff0c;数据仓库的告警铃声又一次响起——DataX同步任务因超时失败&#xff0c;这已经是本周第三次了。作为团队里负责数据同步的工程师&#xff0c;我盯着监控面板上那条迟迟无法完成的曲线&#x…...

编程新知 2026/3/31 12:43:59

《数据驱动防折叠：利用企微API与数据分析平台构建智能发送决策系统》

一、问题背景企微群发折叠与用户的历史互动行为紧密相关。对长期未交互的用户发送营销内容&#xff0c;折叠概率极高&#xff1b;而对活跃用户发送相似内容&#xff0c;则可能正常显示。因此&#xff0c;单纯从发送端进行策略优化是不够的&#xff0c;必须引入用户维度的数据&a…...

编程新知 2026/3/31 12:41:58

Ostrakon-VL-8B LaTeX文档自动化：将手写公式草图转换为排版代码

Ostrakon-VL-8B LaTeX文档自动化&#xff1a;将手写公式草图转换为排版代码 每次写论文或者报告&#xff0c;最头疼的部分是什么&#xff1f;对我而言&#xff0c;绝对是敲那些复杂的LaTeX公式。一个积分符号、一个分式结构&#xff0c;往往要花上好几分钟去回忆语法、调整括号…...

编程新知 2026/3/31 12:37:55

科研党福音：Zotero+Green Frog插件一键获取期刊分区与影响因子（附easyScholar密钥配置全流程）

科研文献管理革命&#xff1a;Zotero与Green Frog插件的深度整合实践 作为一名长期浸泡在学术海洋中的研究者&#xff0c;我深知高效文献管理工具的重要性。每天面对数百篇新发表的论文&#xff0c;如何快速识别高质量文献成为决定科研效率的关键因素。传统的手动查询期刊影响因…...

编程新知 2026/3/31 12:31:49

3种Cookie管理方案对比：为什么本地导出才是开发者最佳选择？

3种Cookie管理方案对比&#xff1a;为什么本地导出才是开发者最佳选择&#xff1f; 【免费下载链接】Get-cookies.txt-LOCALLY Get cookies.txt, NEVER send information outside. 项目地址: https://gitcode.com/gh_mirrors/ge/Get-cookies.txt-LOCALLY 在Web开发和自动…...

编程新知 2026/3/31 12:21:42

uniapp集成腾讯地图：从marker点聚合到轨迹回放的跨端实战与性能调优

1. uniapp集成腾讯地图SDK的核心步骤 第一次在uniapp里用腾讯地图SDK时&#xff0c;我踩了个大坑——直接在H5端跑代码发现地图出不来。后来才明白&#xff0c;腾讯地图在H5端需要单独配置安全域名。具体操作是在腾讯地图开放平台申请key时&#xff0c;必须把H5的域名加入白名单…...

编程新知 2026/3/31 11:09:08

终极音乐解锁方案：在浏览器中实现加密音乐文件高效转换完整指南

终极音乐解锁方案&#xff1a;在浏览器中实现加密音乐文件高效转换完整指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地…...

编程新知 2026/3/31 10:53:03

如何突破设备限制？打造你的全场景跨平台开发中枢

如何突破设备限制&#xff1f;打造你的全场景跨平台开发中枢 【免费下载链接】code-server VS Code in the browser 项目地址: https://gitcode.com/GitHub_Trending/co/code-server 在多设备开发的时代&#xff0c;远程开发环境已成为连接不同终端的核心枢纽&#xff0…...

编程新知 2026/3/31 9:32:07

PCIe金手指设计避坑指南：从硬件选型到PCB布局的5个关键细节

PCIe金手指设计避坑指南&#xff1a;从硬件选型到PCB布局的5个关键细节 在高速数字系统设计中&#xff0c;PCIe金手指接口的可靠性直接决定了扩展卡的识别成功率和数据传输稳定性。许多工程师在完成原理图设计和PCB布局后&#xff0c;常会遇到设备频繁识别失败、链路训练不通过…...

编程新知 2026/3/31 8:53:51