Facebook指示我们将以下代码放在我们的页面上:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
取而代之的是,我将其包装在一个函数中:
function ReloadSocialSharing() {
//facebook
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
并称其为内部:$(function () { }
现在,我的喜欢按钮和我通过Facebook面板的评论都出现了并且工作正常。然后,我进行 AJAX 调用并将新的 html 元素拉入我的页面。这些已经具有适当的Facebook标记,类似于我的原始字段。我像这样进行 ajax 调用:
$('#search').ajaxSubmit(GetSearchAjaxFormOptions(!isDefault, element));
function GetSearchAjaxFormOptions(displayResetPreferencesButton, giveMeFocus) {
return {
target: '#search-results',
data: GetSearchData(),
success: function () { RunAfterSearchResultsAreReturned(giveMeFocus) },
error: function (error) {
alert("Oops. There was an error.")
}
};
}
RunAfterSearchResultsAreReturned() {
........
ReloadSocialSharing();
}
这一切都执行得很好,但是,通过Ajax调用添加的新社交共享元素没有连接并且不起作用。 我错过了什么?
谢谢!
注意:我已经看到了使用FB的说明。XFBML.parse();但是,我试图避免XFBML。
您的尝试不起作用的(主要)原因是由于以下行:
if (d.getElementById(id)) return;
即代码检查 Facebook 脚本(您使用包含的其余代码动态添加)是否已经存在,如果是,则不会再次包含它。我相信重复数据消除是有原因的,无论如何,我测试了重新运行代码(通过确保添加脚本两次)但没有成功。
我看到了你关于 XFBML 的说明,但是调用FB.XFBML.parse()
(没有任何参数)似乎有效,即使你实际使用的标记是 HTML5 标记:
setTimeout(function() {
$('<div class="fb-like" data-send="false" data-layout="standard"
data-width="450" data-show-faces="false" data-colorscheme="light"
data-action="like"></div>').appendTo('#test');
FB.XFBML.parse();
}, 2000);
jsFiddle的工作示例。