使用 ajax 插入标记后显示 Google Plus 按钮

Question

我正在尝试在页面上加载 google+ 1 按钮，目标是通过 ajax 将按钮标记插入页面，然后调用要呈现的按钮。

第一次加载页面时，按钮呈现良好。当从 /displaycode.php 获取标记然后再次进行渲染调用时，就会出现问题。

<a href="javascript:void(0)" id="btn">REFRESH</a>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
  $("#btn").click(function() {
        $('#live-preview').empty();
        $("#live-preview").load('/displaycode.php #code');
        gapi.plusone.go();
    return false;
  });
    gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>

问题的演示可以在这里查看http://32px.co/googleplusdemo.php。感谢您提前提供任何帮助。

Answer 1

渲染方法

使用显式渲染：https://developers.google.com/+/plugins/+1button/#example-explicit-render

gapi.plusone.render('live-preview')

代替：

gapi.plusone.go();

还需要 "{"parsetags": "explicit"}" 集：

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {"parsetags": "explicit"}
</script>

编辑

您还必须确保在 jQuery 加载完成后调用 render。所以元素确实在 DOM 中。

$(function() {
    $("#btn").click(function(e) {
        e.preventDefault();
        $('#live-preview').empty(); // Not necessary 
        $("#live-preview").load('/displaycode.php #code', function() {
            gapi.plusone.render('live-preview');
        });
    });
    gapi.plusone.render('live-preview');
});