我试图加载一个页面上的谷歌+ 1按钮，我们的目标是让按钮标记插入到通过AJAX页面，然后拨打电话的按钮呈现。

I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.

在页面加载周围第一次按钮呈现罚款。问题出现时，标记为/display$c$c.php取出，然后渲染调用再次进行。

The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.

<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 。感谢您事先的任何帮助。

A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.

推荐答案

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

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

来代替：

gapi.plusone.go();

也需要{parsetags：明确的}载：

Also needs "{"parsetags": "explicit"}" set:

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

修改

您还必须确保调用渲染后的jQuery加载完成。因此，该元素是真正的DOM。

Edit

You further have to make sure to call render after the jQuery load is complete. So the element is really in the 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');
});