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 函数调用规则
Aug 26 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
JS实现购物车基本功能
Nov 08 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
利用javaScript处理常用事件详解
Apr 14 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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
laravel 数据验证规则详解
2019/10/23 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
全面了解python字符串和字典
2016/07/07 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
三方合作协议书范本
2014/04/18 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
新员工考核评语
2014/12/31 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
葬礼主持词
2015/07/02 职场文书
计算机教师工作总结
2015/08/13 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Elasticsearch 索引操作和增删改查
2022/04/19 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js