Jquery：ページ上に存在しない動的要素にaddClassを追加

Question

ページ上でIcegram（「exit intent」モーダルポップアッププラグイン）を使用しています。ページにはClick-to-Callリンクがあり、誰かがクリックして電話をかけるといつでもブラウザはページを離れていると判断して、ユーザーが電話をしようとしている間に終了意思のポップアップを表示します。 。

だから、私はこのように、コール・リンクに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> 

しかし、私は何をすべきかに関係なく、「非表示icegram」クラスはicegramに適用されません。ポップアップなので、表示されたままです。

私は、<div class="icegram-popup">がアクティブになったときにのみページに挿入されていることに気付きました。ですから、 "icegram-popup" divを探しているのでaddClassが機能していないのだろうかと思っていますが、ページの読み込みには存在しません。

私がちょうど誰かがコールリンクをクリックすると<div class="icegram-popup">に適用される「hide-icegram」クラスが必要です。何か案は？

Answer 1

icegram-popupクラスの要素が動的に挿入されている場合は、スクリプトでその要素を識別できないことがあります。

てみイベントの委任：

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

jQueryがbodyから開始し、クリックでイベントを委任する.clicktocallを探します。