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 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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之第二天
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php基本函数汇总
2015/07/09 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python自定义函数def的应用详解
2020/06/03 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
python高级特性简介
2020/08/13 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
护理专科自荐书范文
2014/02/18 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2016国培学习心得体会
2016/01/08 职场文书
MySQL基础(一)
2021/04/05 MySQL
Mysql binlog日志文件过大的解决
2021/10/05 MySQL