今天写了一个添加图片的功能，要求右上角要有删除按钮，我使用 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> </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))
})
})
或者简写为：注意，绑定的事件根据自己的情况而定，因为我是手机端的项目，这里我用了 .touchstart （触摸开始时触发事件），否则可能会出现首次点击不能用的现象。
$(".sup-img-box").on("touchstart", function () {
$(".cert-del").click(function () {
$(this).parent().remove();
console.log($(this))
})
})
注意：
.sup-img-box 为动态添加节点的父级节点，这里要保证该父级节点不是动态添加的，不然同样会获取不到。
原创文章，作者：3628473679，如若转载，请注明出处：https://blog.ytso.com/150334.html