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.extend()的实现方式详解及实例
Jun 29 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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 防注入函数(格式化数据)
2011/08/08 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
phpStorm2020 注册码
2020/09/17 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
javascript实现密码验证
2015/11/10 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python双向链表原理与实现方法详解
2019/12/03 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
用Python制作音乐海报
2021/01/26 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
某公司.Net方向面试题
2014/04/24 面试题
会计自荐信范文
2014/03/09 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年教育培训工作总结
2014/12/08 职场文书