【トラブル】新たに追加した要素が重複して表示されてしまう時の対処法

vwo_$(".padding-50px-bottom").vwoElement({"position":"before","html":"<div style=\"min-height: 100px; border: 1px solid #ba00ff; width: 100%;\"></div>"}); 

2.class名もしくはid名が付与されたら、コードを追加する

コードエディタに下記のコードを追加します。

if(vwo_$('追加したclass名もしくはid名').length < 1) {

//　ビジュアルエディタで要素を追加した際に生成されたコード

} 

Point!

id名の指定は 「#id名」のように先頭に#が付きます。

class名の指定は 「.class名」のように先頭に.が付きます。

コードエディタの場合

jQueryで要素を追加するいくつかの方法「append,prepend,before,after」などのメソッドを使って要素を追加した場合、

アンカーリンクなどをクリックするとVWOのコードが再度読み込まれて、要素が重複する可能性があります。

下記は、下記のimg要素をページをappendで追加するという例です。

vwo_$('body').append('<img id="image" src="test.jpg" alt="test img"/>'); 

要素が重複して表示された場合の対処法

重複して表示された場合は下記のようなコードに変更すると、

重複を回避することができます。

if(vwo_$('#image').length < 1){

  vwo_$('body').append('<img id="image" src="test.jpg" alt="test img" />');

}