WordPress環境でjQueryに一度だけプリペンドする方法

Question

私はWordpress Environmentで作業しています。 jqueryを使用してカスタムセクションを挿入して、「Treasure Trove」アイコンを表示して、人々がクリックできるようにしました。このアイコンは、チャットプラグインを使用して作成されたデフォルトの「赤いチャットアイコン」の前に付加されます。

これにより、「赤いチャットアイコン」に直接関連するDIVが作成されます。しかし、私がデフォルトのチャットアイコンを開いて閉じるときはいつでも、宝箱アイコンは毎回複製されます。 「Treasure Trove」アイコンを開いたり閉じたりするたびに重複しないようにするにはどうすればいいですか？

jQueryの

jQuery(document).on("wplc_animation_done", function(e) { 

        jQuery("#wp-live-chat-header").append("<div class='wp-live-chat-extend'><h2>Chat with Us!</h2></div>"); 

      jQuery("#wp-live-chat").prepend("<a href='/exatactical/treasure-trove/'><div id='pbf-treasure-trove' class='pbf-treasure-trove-bg'></div></a>"); // This is what inserts the icon 
      jQuery("#pbf-treasure-trove").append("<div class='wp-live-chat-extend'><h2>Treasure Trove</h2></div>"); 
}); 

CSS

.wp-live-chat-extend { 
    opacity: 0; 
    width: 72px; 
    height: 72px; 
} 

.wp-live-chat-extend:hover{ 
    padding-left: 90px; 
    opacity: 1; 
} 

.wp-live-chat-extend h2 { 
    color: #fff!important; 
    font-size: 20px; 
    width: 200px; 
    margin-top: 20px; 
} 

#pbf-treasure-trove { 
    margin-bottom: 15px; 
    background-image: url(/exatactical/wp-content/uploads/2017/08/iconRetina.png); 
    background-size: cover; 
} 

#pbf-treasure-trove:hover { 
    background-image: url(/exatactical/wp-content/uploads/2017/08/iconRetina2.png); 
    background-size: cover; 
} 

.pbf-treasure-trove-bg { 
    border-radius: 62px 62px; 
    background: #00ADEF; 
    width: 62px; 
    height: 62px; 
} 

Answer 1

あなたはjQueryの.one()メソッドを利用することができるはずです。

jQuery(document).on("wplc_animation_done", function(e) { 
    jQuery("#wp-live-chat-header").append("<div class='wp-live-chat-extend'><h2>Chat with Us!</h2></div>"); 
    jQuery("#pbf-treasure-trove").append("<div class='wp-live-chat-extend'><h2>Treasure Trove</h2></div>"); 
}).one("wplc_animation_done", function(e) { 
    jQuery("#wp-live-chat").prepend("<a href='/exatactical/treasure-trove/'><div id='pbf-treasure-trove' class='pbf-treasure-trove-bg'></div></a>"); // This is what inserts the icon 
}); 

必要であれば、他の二つの株も.one()ハンドラにシャッフルすることができます。

Answer 2

jQuery(document).one() 

one()だけハンドラを一度実行し、対on()は永続的です。

http://api.jquery.com/one/