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

This question already has answers here:

Event binding on dynamically created elements?
                            
                                （23个答案）
                            
                    
                3年前关闭。
        

    

我在页面上使用Icegram（“退出意图”模式弹出插件）。我们在页面上有点击通话链接，问题是，只要有人单击呼叫，浏览器就会认为它离开了页面，因此我们在人们尝试呼叫时会显示退出意图弹出窗口，这绝对不是我们想要的。

因此，我尝试将jQuery函数添加到调用链接中，如下所示：

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

<a href="tel:[phone]" 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，但是在页面加载时不存在，所以这可能是问题所在吗？

我只想在有人单击呼叫链接时将“隐藏冰图”类应用于<div class="icegram-popup">。有任何想法吗？

最佳答案

当然，如果动态插入具有icegram-popup类的元素，则脚本无法在加载时识别它。

尝试事件委派：

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

jQuery将从body开始，并寻找.clicktocall以便在单击时委派事件。