JS/jQuery获取不到动态添加的元素节点的解决方法
今天写了一个添加图片的功能，要求右上角要有删除按钮，我使用 jQuery 动态添加的方式。
发现后 添加的元素无法删除 ，打印显示 undefined ，原来 JavaScript 和 jQuery 无法获取动态添加的元素节点。
解决方法：
动态添加的标签要事件委托才能获取到节点，也就是说要用：
$(selector).on(events,[selector],[data],fn)属性解析：
|
参数 |
描述 |
|---|---|
|
events |
一个或多个用空格分隔的事件类型和可选的命名空间。 |
|
selector |
可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 |
|
data |
可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 |
|
fn |
该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回 false 。 |
我们追加元素的父节点添加事件委托，就调用里面子节点了：
举个栗子，我在
.sup-img-box
中添加了子节点
.cert-img
。
HTML代码如下：
<div class="sup-img-box">
<div class="cert-img">
<div class="cert-del"></div>
<img src="img/sup-cert-de.png" alt="">
</div>
想要使里面的
.cert-del
元素可以获取到，可以这样写：
$(".sup-img-box").on("mouseenter", ".cert-del", function () {
$(this).click(function () {
$(this).parent().remove();
console.log($(this))
})也可以这样写：
$(".sup-img-box").on("mouseenter",".cert-del", function () {
$(".cert-del").click(function () {
$(this).parent().remove();
console.log($(this))