Jquery：将Class添加到页面加载时不存在的动态元素[重复]

Question

我在一个页面上使用 Icegram（一个“退出意图”模式弹出插件）。我们在页面上有点击通话链接，问题是每当有人点击通话时，浏览器都会将其视为离开页面，因此我们的退出意图弹出窗口会在人们尝试通话时显示，这绝对不是我们想要的.

所以，我尝试在调用链接中添加一个 jQuery 函数，如下所示：

<style>
.hide-icegram {display:none !important}
</style>

<a href="tel:8888888888" class="clicktocall">8888888888</a>

<div class="icegram-popup"></div> <!--div inserted dynamically by icegram's script-->

<script>
jQuery(".clicktocall").click( function() {
jQuery(".icegram-popup").addClass("hide-icegram");
});
</script>

但是无论我做什么，“hide-icegram”类都不会应用于icegram弹出窗口，所以它保持可见。

我注意到<div class="icegram-popup"> 仅在激活时才会插入页面中。所以我想知道 addClass 是否不起作用，因为它正在寻找“icegram-popup” div，但它在页面加载时不存在，所以也许这就是问题所在？

只要有人点击通话链接，我只想将“hide-icegram”类应用于<div class="icegram-popup">。有什么想法吗？

Answer 1

如果具有icegram-popup 类的元素是动态插入的，那么您的脚本肯定无法在加载时识别它。

尝试事件委托：

$("body").on("click", ".clicktocall", function() {
    $(".icegram-popup").addClass("hide-icegram");
});

jQuery 将从body 开始并寻找.clicktocall 来委托点击事件。