动态（ajax）内容加载，Facebook分享按钮消失

Question

所以在文中（文章）我有这个：

<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/hu_HU/sdk.js#xfbml=1&version=v2.5";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="facebook_share_wrapper">
    <div class="fb-share-button"
         data-href="http://www...."
         data-layout="button">
    </div>
</div>

这是第一次，它加载得很好！但是第二次，在ajax完成之后：

setTimeout(function() {
    console.log(FB.XFBML.parse());
}, 3000);

正如你所看到的，我给了一个额外的时机。但Facebook分享按钮不会出现！许多类似的问题用FB.XFBML.parse解决了，但不是我的......

Answer 1

我假设您也尝试动态加载JS SDK，但如果您只是将它添加到DOM（例如，使用innerHTML），则不会调用JS。此外，您不初始化任何应用程序。

解决方案：

• 在页面加载时加载JS SDK - 仅限一次
• 使用FB.init初始化您的应用程序
• 在将共享按钮添加到DOM之后立即在AJAX调用的回调中使用FB.XFBML.parse()

其他信息和如何加载JS SDK的示例：https://developers.facebook.com/docs/javascript/quickstart

重要提示：不要使用setTimeout，这只是一个非常糟糕的解决方法。