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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
从0开始学Vue
Oct 27 Javascript
js实现京东轮播图效果
Jun 30 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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程序
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python同步两个文件夹下的内容
2019/08/29 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
C语言笔试题回忆
2015/04/02 面试题
教师的实习自我鉴定
2013/12/17 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书