jquery - 只追加一次 html 的最佳方法是什么？

Question

当我单击“显示评论”链接时，我想打开一个 Div 并附加 Facebook 评论框。但我只想附加一次 FB-Comments，然后只需使用链接来切换该 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();