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


Posted in Javascript onJune 24, 2016

一、问题描述

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

二、解决方法

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

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

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

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

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() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

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

 

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()方法却是绑定在原选择器<p>上的,然后将.new放在了参数列表中,原理参照上文on()的官方定义和用法。

以上便是所有内容,如有需要修改或补充的地方,欢迎交流。

Javascript 相关文章推荐
JavaScript中exec函数用法实例分析
Jun 08 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 #Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 #Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 #Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 #Javascript
正则表达式(语法篇推荐)
Jun 24 #Javascript
You might like
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php发送与接收流文件的方法
2015/02/11 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php文件读取方法实例分析
2015/06/20 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
Yii框架安装简明教程
2020/05/15 PHP
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
详解python之协程gevent模块
2018/06/14 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python实现银行账户系统
2021/02/22 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
合同意向书范本
2014/07/30 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2016年情人节广告语
2016/01/28 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
SQL Server表分区删除详情
2021/10/16 SQL Server
python中对列表的删除和添加方法详解
2022/02/24 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers