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,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,'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.
