JS/jQuery获取不到动态添加的元素节点的解决方法
jQuery undefined.png 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>
</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 为动态添加节点的父级节点，这里要保证该父级节点不是动态添加的，不然同样会获取不到。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录