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 CSS修改学习第一章 查找位置
Feb 19 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
js中unicode转码方法详解
Oct 09 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
JS实现鼠标移动拖尾
Dec 27 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
js常用代码段整理
2011/11/30 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python实现字典嵌套列表取值
2019/12/16 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python如何合并多个字典或映射
2020/07/24 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
C语言编程练习
2012/04/02 面试题
护士长2014年终工作总结
2014/11/11 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
nginx配置限速限流基于内置模块
2022/05/02 Servers
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS
mysql序号rownum行号实现方式
2022/12/24 MySQL