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闭包 实例分析
Dec 25 Javascript
js中call与apply的用法小结
Dec 28 Javascript
JavaScript事件委托实例分析
May 26 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python迭代器实例简析
2014/09/25 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
青春无悔演讲稿
2014/05/08 职场文书
学校三节实施方案
2014/06/09 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫