我在页面上使用 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">
任何时候有人点击通话链接。有什么想法吗?
最佳答案
如果带有 icegram-popup
类的元素是动态插入的,那么您的脚本肯定无法在加载时识别它。
尝试事件委托(delegate):
$("body").on("click", ".clicktocall", function() {
$(".icegram-popup").addClass("hide-icegram");
});
jQuery 将从 body
开始,查找 .clicktocall
来委托(delegate)单击事件。
关于javascript - Jquery:将Class添加到页面加载时不存在的动态元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39819987/