ajax - 使用 AJAX 连接 Facebook HTML5 点赞和评论元素

Question

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。

Answer 1

您的尝试不起作用的(主要)原因是因为这一行:

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 .