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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
js编写简单的计时器功能
Jul 15 Javascript
vue实现全选和反选功能
Aug 31 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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基于base64解码图片与加密图片还原实例
2014/11/03 PHP
简单的自定义php模板引擎
2016/08/26 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
js基于canvas实现时钟组件
2021/02/07 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python高并发和多线程有什么关系
2020/11/14 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
2014小学一年级班主任工作总结
2014/12/05 职场文书
小学少先队活动总结
2015/05/08 职场文书
python的html标准库
2022/04/29 Python