单个元素上的FB.XFBML.parse()不执行任何操作 [英] FB.XFBML.parse() on individual element does nothing
问题描述
我有一个很大的页面，底部有一个加载更多"按钮；每次点击加载更多"都会通过AJAX加载更多内容.该内容的一部分是Facebook之类的按钮:
I have a big page with a "load more" button at the bottom; each click on "load more" loads more content via AJAX. Part of that content is Facebook like buttons:
<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函数要做的事情越来越多.
After loading the additional content, I can ask Facebook to re-parse the entire page with FB.XFBML.parse(); (which causes those divs to turn into actual like buttons). This works perfectly, however, it gets slow right away, since Facebook re-parses the content that was already on the page, not just the new content. Every time the user clicks "load more" it parses the entire page, so there's just more and more for the FB function to do.
现在这是个好消息:FB的解析方法的文档说:
Now here's the good news: the docs for FB's parse method say:
...仅评估文档的一部分，您可以传递一个 元素.
...to only evaluate a portion of a document, you can pass in a single element.
FB.XFBML.parse(document.getElementById('foo'));
所以，我想，当用户单击加载更多"时，我会将新的HTML包装在唯一的div中，然后使用jQuery浏览div，找到所有Facebook标签并询问Facebook只能解析这些内容.好主意，对不对?但这是行不通的.元素加载后，代码似乎会将元素传递给Facebook，但它们没有解析.代码:
So I thought, okay, when the user clicks "load more," I'll wrap that fresh HTML in a unique div, then use jQuery to walk through the div, find all the Facebook tags and ask Facebook to parse just those. Good idea, right? But it doesn't work. The code seems to be passing the elements to Facebook after they're loaded, but they aren't parsing. Code:
// "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);
});
}
}
});
});
没有错误消息，只是没有产生任何结果.控制台上的调试代码看起来很完美，可以找到所有正确的元素.
There's no error message, it just doesn't produce any results. The debug code to the console looks perfect, it's finding all the right elements.
更新 通过以下简单的jsfiddle进行操作: http://jsfiddle.net/pnoeric/NF2jz/4372/
UPDATE play with it at this simple jsfiddle: http://jsfiddle.net/pnoeric/NF2jz/4372/
更新2 ，我还尝试将代码从HTML5更改为FBML(单击"(查看此页上的代码)以查看区别)，它不仅具有相同的结果，而且现在只会在ajax调用中加载一个附加按钮，而不是两个.因此情况变得更糟！您可以在这里使用FBML版本: http://jsfiddle.net/pnoeric/4QkbX/2/
UPDATE 2 I also tried changing the code from HTML5 to FBML (click "Get Code" on this page to see the difference), which not only had the same result but now also would only load one additional button on the ajax call, instead of two. So it got worse! You can play with the FBML version here: http://jsfiddle.net/pnoeric/4QkbX/2/
推荐答案
文档指定dom元素应为root DOM node, defaults to body.因此，我用创建的DOM元素对.parse方法的单个调用替换了.each函数调用.这是 jsfiddle .
The docs specifies that the dom element should be root DOM node, defaults to body. So I replace.each function call with a single call to a .parse method with the created DOM element. Here is a jsfiddle.
FB.XFBML.parse($newhtml[0]);
注意:应该在窗口小部件的父元素上而不是在XFBML元素本身上直接调用FB.XFBML.parse().
Note: FB.XFBML.parse() should be called on a parent element of the widget, not directly on the XFBML element itself.
这篇关于单个元素上的FB.XFBML.parse()不执行任何操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
