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 相关文章推荐
文本加密解密
Jun 23 Javascript
简单的无缝滚动程序-仅几行代码
May 08 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JS简单计算器实例
Jan 20 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
JavaScript数组复制详解
Feb 02 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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.ini中文版(1)
2006/10/09 PHP
php二维码生成以及下载实现
2017/09/28 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
python分析作业提交情况
2017/11/22 Python
python编程嵌套函数实例代码
2018/02/11 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python 3 判断2个字典相同
2019/08/06 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python标识符命名规范原理解析
2020/01/10 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2014年人大工作总结
2014/12/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技