javascript - How to prepend only once in jQuery in a Wordpress environment -


i working in wordpress environment. inserted custom section using jquery show "treasure trove" icon people can click on it. icon prepended default "red chat icon" created through chat plugin.

this makes div created directly related "red chat icon". whenever open , close default chat icon treasure trove icon duplicates every time. how go making "treasure trove" icon not duplicate every time opened , closed?

example

jquery

    jquery(document).on("wplc_animation_done", function(e) {                      jquery( "#wp-live-chat-header" ).append( "<div class='wp-live-chat-extend'><h2>chat 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>" ); // inserts 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; }

you should able exploit jquery's .one() method.

jquery(document).on("wplc_animation_done", function(e) {     jquery( "#wp-live-chat-header" ).append( "<div class='wp-live-chat-extend'><h2>chat 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>" ); // inserts icon });

if necessary, other 2 lines can shuffled .one() handler.


Comments

Post a Comment

Popular posts from this blog

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

meteor - inserting data to database gives error "insert failed: Method '/texts/insert' not found" -

i have other project broke somehow(i have no idea) , rebuilt app same file names , code , working fine. problem when go insert data database called texts error insert failed: method '/texts/insert' not found not know wrong because copied every line of code previous project , problem came wasn't there before. confuses me when create user accounts accounts.createuser() works fine. sendtext.js import react "react"; import {texts} "./../api/text"; import {withrouter} 'react-router-dom'; import {meteor} "meteor/meteor"; import {accounts} "meteor/accounts-base" class sendtext extends react.component{ send(e){ e.preventdefault(); let message = this.refs.message.value; let name = accounts.user().username if(name != ""){ if(message){ texts.insert({ name, message }); this.refs.m...
Read more