javascript - Jquery:将Class添加到页面加载时不存在的动态元素

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我在页面上使用 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 类的元素是动态插入的，那么您的脚本肯定无法在加载时识别它。

尝试事件委托(delegate):

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

jQuery 将从 body 开始，查找 .clicktocall 来委托(delegate)单击事件。