0

I'm using Icegram (an "exit intent" modal popup plugin) on a page. We have click-to-call links on the page, and the problem is that anytime someone clicks to call, the browser sees it as leaving the page so our exit intent popup shows while people try to call, which is definitely not what we want.

So, I've tried adding a jQuery function to the call links, like this:

<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>

But no matter what I do, the "hide-icegram" class does NOT get applied to the icegram popup, so it stays visible.

I noticed that <div class="icegram-popup"> is inserted in the page only when it's activated. So I'm wondering if the addClass isn't working because it's looking for the "icegram-popup" div, but it doesn't exist on page load so maybe that's the issue?

I just want the "hide-icegram" class applied to <div class="icegram-popup"> anytime someone clicks the call links. Any ideas?

user1610904
  • 353
  • 2
  • 19
  • You need to use a delegated event handler as the `.icegram-popup` element is added to the DOM after the page loads. See the question I marked as duplicate for a more extensive explanation of the issue and the solution to it. – Rory McCrossan Oct 02 '16 at 18:14

1 Answers1

1

If the element with icegram-popup class is dynamically inserted, for sure, your script can't identify it onload.

Try event delegation:

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

jQuery will start from body and look for a .clicktocall to delegate the event on click.

Louys Patrice Bessette
  • 27,837
  • 5
  • 32
  • 57