jQuery如何获取动态添加的元素

开发工具与关键技术:Visual Studio 2015、C#
作者:曾浩源
撰写时间:2019年07月06日

一、问题描述

使用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素。

为什么会无法获取到这个新添加的元素呢?我一开始就去实验了一下,发现,可以获取到啊?
在这里插入图片描述在这里插入图片描述
后来我把两段代码互换一下位置,把绑定click事件放到前面,这肯定是不行,因为没有把新添加的元素加载出来就绑定点击事件,当然是无效的。我回头看了我之前的项目,那为什么我那个项目也不能直接获取到新添加的元素呢?
在这里插入图片描述
点击左边菜单栏,触发skip方法,使用layui的xadmin框架自带的add_tab方法的根据控制器的返回值为ul标签追加新元素(li标签),给它直接绑定点击事件,发现该点击事件无效,而只有点击我的桌面有效。
在这里插入图片描述
因为只有 我的桌面 是在绑定点击事件前加载出来的,而日志内容加载完js后,通过点击事件触发 skip方法 而重新追加的新元素(li标签),所以新元素没有绑定到点击事件。
在这里插入图片描述

二、解决方法

度娘推荐的方法基本是用live()方法
  live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

但是jQuery 1.9及其以上已经无法使用live(),可以用on()方法代替live().

在这里插入图片描述

使用on()方法后,就可以为未来元素,也就是在js加载完后再追加的新元素绑定事件:

在这里插入图片描述

这样子就可以获取到了新添加的元素。

在这里插入图片描述
所以并不是所以的追加新元素都需要使用on()方法为新元素绑定事件,一般需要用到的是:

1、在js加载完后再追加的新元素。
2、异步追加的新元素。

总的来说就是顺序的问题。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页