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的parseInt 进制问题
May 07 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
vue 动态表单开发方法案例详解
Dec 02 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
ajax php 实现写入数据库
2009/09/02 PHP
php显示时间常用方法小结
2015/06/05 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python函数中的可变长参数详解
2019/09/12 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
学生实习推荐信范文
2013/11/26 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
资产运营委托书范本
2014/10/16 职场文书
志愿者事迹材料
2014/12/26 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python