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

news/2024/11/19 4:34:35/

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()的官方定义和用法。


http://www.ppmy.cn/news/1000050.html

相关文章

Rpc异步日志模块

Rpc异步日志模块作用 在一个大型分布式系统中&#xff0c;任何部署的分布式节点都可能发生崩溃&#xff0c;试想如果用普通的办法&#xff0c;即先排查哪个节点down掉了&#xff0c;找到down掉的节点后采取调试工具gdb调试该节点&#xff0c;进而排查宕机的原因。这中排查方法…

如何通过 5 步激活策略扩大用户群

假设&#xff0c;你现在是一个“深藏功与名”的增长黑客。前期你表现非常好&#xff0c;做了一些拉新实验&#xff0c;每天都有上千用户进入到产品。团队成员和家人朋友都非常开心你们的产品增长终于有了起色。 然而&#xff0c;如果你不重视拉新&#xff08;acquisition&…

Eureka 学习笔记2:EurekaClient

版本 awsVersion ‘1.11.277’ EurekaClient 接口实现了 LookupService 接口&#xff0c;拥有唯一的实现类 DiscoveryClient 类。 LookupService 接口提供以下功能&#xff1a; 获取注册表根据应用名称获取应用根据实例 id 获取实例信息 public interface LookupService<…

Python系统学习1-2

目录 一、硬件 二、软件&#xff1a;程序文档 三、基础知识 四、python执行过程 五、Pycharm使用技巧 一、硬件 计算机五大部件&#xff1a;运算器&#xff0c;存储器&#xff0c;控制器、输入设备&#xff0c;输出设备。 运算器和控制器 集成在CPU中。 存储&#xff1a…

爬虫教程1_Xpath 入门教程

Xpath 入门教程 在编写爬虫程序的过程中提取信息是非常重要的环节&#xff0c;但是有时使用正则表达式无法匹配到想要的信息&#xff0c;或者书写起来非常麻烦&#xff0c;此时就需要用另外一种数据解析方法&#xff0c;也就是本节要介绍的 Xpath 表达式。 Xpath表达式 XPath…

每日一道面试题之Iterator 和 ListIterator 有什么区别?

Iterator 和 ListIterator 都是 Java 集合框架中用于遍历集合元素的接口&#xff0c;但它们有一些区别: 使用的范围&#xff1a;Iterator可以迭代所有集合,而ListIterator 只能用于List及其子类。 继承关系&#xff1a;ListIterator 继承 Iterator&#xff0c;并且ListIterat…

Golang之路---02 基础语法——异常机制:panic 和 recover

Golang的异常处理 Go 没有像 Java 和 .NET 那样的 try/catch 异常机制&#xff1a;不能执行抛异常操作。 在 Golang 中&#xff0c;有不少常规错误&#xff0c;在编译阶段就能提前告警&#xff0c;比如语法错误或类型错误等&#xff0c;但是有些错误仅能在程序运行后才能发生&…

vue中axios的使用

什么是Axios Axios是一个基于Promise的HTTP客户端库&#xff0c;用于发送HTTP请求并处理响应。它可以在浏览器和Node.js环境中使用&#xff0c;并提供了许多功能&#xff0c;如拦截请求和响应、转换请求和响应数据、取消请求等。 使用场景&#xff1a; 发送AJAX请求&#xf…