jquery - HTMLを一度だけ追加する最良の方法は何ですか?

Question

「コメントを表示」リンクをクリックしたときに、Div を開いて Facebook コメント ボックスを追加したいと考えています。しかし、FB コメントを 1 回だけ追加してから、リンクを使用してその Div を切り替えたいだけです。

私はこのようなことを試みていましたが、もちろん、リンクをクリックするたびに追加されます...

http://jsfiddle.net/4LnzD/

ありがとう！！

アップデート：

http://jsfiddle.net/4LnzD/4/

今ではうまく機能していますが、誰かがそれを行うための最も効率的な方法を知っていれば、大歓迎です!

Answer 1

コンテンツを追加した後、ターゲット要素にクラス名を追加します。もう一度追加する前に、クラス名の存在を確認してください。

1）クラスを追加する

$('#target').addClass("done")

2）クラスを確認します

if($('#target').hasClass("done")) {
 ...
}

Answer 2

コメント div が DOM に既に存在するかどうかを確認し、存在しない場合は追加します。

if( ! $('#fb_comments_' + uid).children(".fb-comments").length ){
  $('#fb_comments_' + uid).append(commentBox);
}

$('#fb_comments_' + uid).toggle();

.length は、DOM 内のそのセレクターに一致する要素のインスタンスの数を返します。0 は JavaScript では false に相当するため、条件でブール値として扱うことができます。

Answer 3

使用する：

$(document).load( function() {
    //Load comments section here
    $('.fb_comments').hide(); 
})

これによりコメントが作成されますが、非表示になります。次に、ボタンを作成し、onClick（またはバインドして.click()）これを呼び出します。

$('.fb_comments').toggle();