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 节点排序 2
Jan 31 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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/11 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
javascript 数组操作详解
2015/01/29 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
JS实现简易计算器
2020/02/14 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
详解python的变量缓存机制
2021/01/24 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
英语专业毕业生自荐信
2013/10/28 职场文书
创业计划书模版
2014/02/05 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2015年市场部工作总结
2015/04/30 职场文书
Python天气语音播报小助手
2021/09/25 Python