javascript - 加载后动态添加 facebook 之类的按钮

Question

我正在尝试使用 fb 文档中提供的标准 like 按钮代码向页面添加 like 按钮:

https://developers.facebook.com/docs/plugins/like-button/

由于我想添加的按钮数量，这导致加载速度极慢。

为了解决这个问题，我希望使用 jquery 根据需要加载按钮，但如果我以这种方式添加按钮代码，它们将附加到正确的位置(在开发人员工具元素窗口中可见)，但按钮确实没有出现。

有没有办法动态添加这些按钮？我猜它不起作用，因为启动后无法添加按钮，但我不知道如何解决这个问题。

我在 body 标签中包含了所需的代码

<div id="fb-root"></div>
<script type="text/javascript">
    (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_GB/all.js#xfbml=1&appId=************";
        fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 </script>

我正在使用的类似 fb 的代码是文档生成的代码:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

我试过用这种方式添加一个按钮:

   $(".myitem").append('<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>');                   

更新:

我试过触发 FB.XFBML.parse();添加新按钮后，但这会刷新页面上的所有按钮，而不仅仅是新添加的按钮。

Answer 1

要强制刷新/渲染“赞”按钮，您可以使用遍历整个 DOM 文档的 FB.XFBML.parse();。

如果您只想浏览文档的一部分，您可以传递一个 DOM 对象(例如，带有 1 个按钮的容器元素)。

FB.XFBML.parse(document.getElementById('containerX'));