单个元素上的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/

更新2我也尝试将代码从HTML5更改为FBML(点击此页面上的"获取代码"以查看差异),这不仅具有相同的结果,而且现在也只会在ajax调用上加载一个额外的按钮,而不是二.所以它变得更糟!你可以在这里玩FBML版本:http://jsfiddle.net/pnoeric/4QkbX/2/

Answer 1

该文档指定的DOM元素应该是root DOM node, defaults to body.所以我.each用一个.parse带有创建的DOM元素的方法调用替换函数调用.这是一个jsfiddle.

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

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