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 相关文章推荐
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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下MAIL的另一解决方案
2006/10/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php定时执行任务设置详解
2015/02/06 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
详解python之协程gevent模块
2018/06/14 Python
python语言基本语句用法总结
2019/06/11 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
家长给孩子的评语
2014/01/30 职场文书
材料员岗位职责
2014/03/13 职场文书
小学生家长寄语
2014/04/02 职场文书
学校四风对照检查材料
2014/08/28 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
拾金不昧表扬信
2015/01/16 职场文书
党员自我评价2015
2015/03/03 职场文书
道歉信怎么写
2015/05/12 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
Python 键盘事件详解
2021/11/11 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫