对单个元素执行FB.XFBML.parse()不会执行任何操作

Question

我有一个大页面，底部有一个"加载更多"按钮；每次点击"加载更多"都会通过AJAX加载更多内容。部分内容是类似Facebook的按钮：

<div class="fb-like" data-href="http://mysite.com/a<?=$x ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>

加载完额外的内容后，我可以要求Facebook用FB.XFBML.parse();重新解析整个页面（这会导致这些div变成实际的类似按钮）。这非常有效，然而，它马上就会变慢，因为Facebook重新解析页面上已经存在的内容，而不仅仅是新内容。每次用户点击"加载更多"，它就会解析整个页面，所以FB函数要做的事情越来越多

现在有个好消息：FB解析方法的文档说：

要只评估文档的一部分，可以传入一个要素

FB.XFBML.parse(document.getElementById('foo'));

所以我想，好吧，当用户点击"加载更多"时，我会将新的HTML包装在一个唯一的div中，然后使用jQuery遍历div，找到所有的Facebook标签，并要求Facebook只解析这些标签。好主意，对吧？但它不起作用。代码似乎是在加载元素后将其传递给Facebook，但它们并没有进行解析。代码：

// "c" is my container div (a jQuery object, i.e. c = $('#container'); ) 
// "load more" button
$('#loadmore').click(function() {
    $.ajax({
        url: "/loadmore.php",
        success: function(html) {
            if(html) {
                // wrap new HTML in special div & append
                newDivName = "d"+String(new Date().valueOf());
                var $newHtml = $("<div id='"+newDivName+"'>"+html+"</div>");
                c.append($newHtml);
                // walk through new HTML and get all Facebook "like" buttons and parse them
                $('#'+newDivName+' .fb-like').each(function() {
                    FB.XFBML.parse(this);
                });
            }
        }
    });
});

没有错误消息，只是没有产生任何结果。控制台的调试代码看起来很完美，它找到了所有正确的元素。

更新使用这个简单的jsfiddle：http://jsfiddle.net/pnoeric/NF2jz/4372/

UPDATE 2我还尝试将代码从HTML5更改为FBML（单击此页面上的"获取代码"查看差异），这不仅有相同的结果，而且现在只会在ajax调用上加载一个额外的按钮，而不是两个。所以情况变得更糟了！你可以在这里玩FBML版本：http://jsfiddle.net/pnoeric/4QkbX/2/

Answer 1

docs指定dom元素应该是root DOM node, defaults to body。因此，我将.each函数调用替换为对具有创建的DOM元素的.parse方法的单个调用。这是一把小提琴。

 FB.XFBML.parse($newhtml[0]);

注意：FB.XFBML.parse（）应该在小部件的父元素上调用，而不是直接在XFBML元素本身上调用。

Answer 2

在我的情况下，接受的解决方案不起作用，因为FB帖子被附加在同一DOM容器中。

我最终做的是，对容器运行一个FB.XFBML.parse（），使用.each循环并removeClass FB-post，添加加载的类facebook-post。然后，在随后的Ajax调用和获取新的fb-post时，fb.XFBML.parse（）将不会拾取已经加载的元素，因为它们不再具有fb-post类。