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 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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强制下载PDF文件示例
2014/01/17 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
JS动画效果代码3
2008/04/03 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
暑期实习鉴定
2013/12/16 职场文书
企业负责人任命书
2014/06/05 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书