9

我有一个大页面，底部有一个“加载更多”按钮；每次点击“加载更多”都会通过 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/

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

4

2 回答 2

28

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

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

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

于 2013-08-24T15:18:05.557 回答
1

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

我最终做的是向容器运行 FB.XFBML.parse()，使用 .each 循环并 removeClass fb-post，添加类 facebook-post-loaded。然后在随后的 Ajax 调用和获取新的 fb 帖子时，FB.XFBML.parse() 不会选择已加载的元素，因为它们不再具有 fb-post 类。

于 2017-02-22T18:50:09.110 回答