我有一个Rails 3.1应用程序，我想允许用户共享通过Twitter，谷歌和Facebook（HTML5版本的类似按钮的）项目。我有它伟大的工作，展示页上的项目（即 - 只是表明一个项目），但我有一个容器页面加载在通过Ajax一个列表中的项目的问题。我想有每个项目旁边的容器中的独立共享按钮。

I have a rails 3.1 application where I want to allow users to share items via Twitter, Google+ and Facebook (HTML5 version of the like button). I have it working great on the show page for the item (i.e. - just showing that one item), but I'm having issues on a container page that loads the items in a list via Ajax. I want to have separate share buttons next to each item in the container.

第一次加载页面时，共享按钮显示的罚款每个项目旁边。只有当我通过AJAX的，我的问题的出现刷新容器。在Twitter，谷歌和Facebook按钮不会显示出来。以下是我有这样的设置：

The first time the page loads, the share buttons show up fine next to each item. It's only when I reload the container via ajax that my issue arises. The Twitter, Google+ and Facebook buttons do not show up. Here's how I have this set up:

application.html.haml

-# This is right before the body tag closes
= render 'site/share_js'

_share_js.html.erb（从每个供应商code）

<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&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<%# Twitter %>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<%# Google+ %>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

_share_buttons.html.erb（来分享该项目的URL被传递）

<div class="share-buttons">

<%# Twitter %>
<a  href="https://twitter.com/share" 
class="twitter-share-button" 
data-lang="en"
data-count="horizontal"
data-text="<%= share_text %>"
data-url="<%= bly_url %>">
Tweet
</a>

<%# Google+ %>
<g:plusone size="medium" href="<%= full_url %>"></g:plusone>

<%# Facebook %>
<div    class="fb-like" 
    data-href="<%= full_url %>" 
    data-send="true" 
    data-layout="button_count" 
    data-width="75"
    data-image="<%= image_path_here %>" 
    data-show-faces="false"></div>

</div>

如果我使用部分项目的展示页面或首次容器装载的share_buttons，它的伟大工程：

If I use the share_buttons partial on the item's show page or the first time the container loads, it works great:

_my_item.html.haml

-# other code here that displays the item...
= render :partial => 'site/share_buttons', :locals => share_info_hash

但是，正如我上面提到的，它并没有在阿贾克斯行动后工作，以及：

But, as I alluded to above, it doesn't work as well after the ajax action:

my_ajax_action.js.erb（通过format.js控制器的称呼）

$("#item-container").html("<%= escape_javascript(render :partial => "my_item", :collection => @item_list)%>");

该项目在容器正确的所有显示，但共享按钮不显示。我猜测，这个问题是JavaScript需要执行的AJAX操作后运行提供具体的。我试过把的JavaScript的HTML后my_ajax_action.js.erb文件中被刷新的供应商，但是这似乎并没有这样的伎俩。有没有人对我怎么能得到这个工作任何想法？任何援助多少AP preciated！

The items all display correctly in the container, but the share buttons aren't displaying. I'm guessing that the issue is that provider specific javascript needs to run after executing the ajax action. I've tried placing the provider javascript inside the my_ajax_action.js.erb file after the html is refreshed, but this doesn't seem to do the trick. Does anyone have any ideas on how I could get this to work? Any assistance is much appreciated!

推荐答案

这是您要渲染使用的搜索和替换技术的按钮。这工作没有任何特殊的干预时成为按钮的元素在页面上已经存在的时候onload事件发生。

The buttons that you are trying to render use a search and replace technique. This works without any special intervention when the elements that become the buttons already exist on the page when onload occurs.

在你的情况下，虽然，成为按钮的元素插入替换脚本执行后。由于订单不同，比预期的脚本，你需要触发的渲染后，自己添加新的按钮，你的页面。

In your case, though, the elements that become the buttons are inserted after the replace script has executed. Since the order is different than the scripts expect, you'll need to trigger the rendering yourself after you add the new buttons to your page.

下面是一些链接，文档解释如何做到这一点的每个服务：

Here are some links to docs that explain how to do this for each service:

谷歌+1按钮：https://developers.google.com/+/plugins/+1button/#example-explicit-load

Facebook的Like按钮：http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

分享Tweet按钮：嗯，我无法找到这一个在文档，但基于一些论坛活动，这看起来像code你要找的：

Tweet button: Well I can't find this one in the docs, but based on some forum activity this looks like the code you're looking for:

twttr.widgets.load();

（在这里看到相关的论坛帖子： https://dev.twitter.com/discussions/890 ）