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函数的功能越来越多。

现在这是好消息：docs for FB's parse method说：

...只评估文档的一部分，您可以传入一个文档   元件。

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/

更新2 我还尝试将代码从HTML5更改为FBML（click "Get Code" on this page以查看差异），这不仅具有相同的结果，而且现在也只会加载一个额外的按钮在ajax调用上，而不是两个。所以它变得更糟！您可以在此处使用FBML版本：http://jsfiddle.net/pnoeric/4QkbX/2/

Answer 1

docs指定dom元素应为root DOM node, defaults to body。所以我用一个.each方法调用已创建的DOM元素来替换.parse函数调用。这是jsfiddle。

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

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

Answer 2

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

我最终做的是，运行FB.XFBML.parse（）到容器，使用.each循环和removeClass fb-post，添加类facebook-post-loaded。然后在随后的Ajax调用和新fb帖子的提取中，FB.XFBML.parse（）不会选择已经加载的元素，因为他们不再拥有fb-post类。

单个元素上的FB.XFBML.parse（）不执行任何操作

2 个答案: