How to make AddThis to work with Rails 4 turbo-links?

Question

I am trying to set AddThis plugin on my Rails site but currently have only partial success. The problem is it doesn't work as it should with turbo-links. AddThis share buttons appear only after page refreshes. If I click on some other part of site, AddThis toolbar disappears. If I would disable turbo-links, then it would work on each part of the site.

This is the code get when I generate smart layers:

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

That code of course doesn't work with turbo-links. I found this solution' how to make add this work with turbilinks rails 4, where author confirmed it works but I still have problems when I click on some other part of the site.

I tried to insert this code inside head tag in my application.html.erb file:

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript">$(document).ready(function() {

    var script="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx";

    if (window.addthis){
        window.addthis = null;
        window._adr = null;
        window._atc = null;
        window._atd = null;
        window._ate = null;
        window._atr = null;
        window._atw = null;
    }
    $.getScript(script, function(){
        addthis.layers({
            'theme' : 'transparent',
            'share' : {
              'position' : 'left',
              'numPreferredServices' : 5
            }   
        });
    });
});
</script>
<!-- AddThis Smart Layers END -->

AddThis again normally loads after I open my site but as soon I switch to other part of site, AddThis disappears.

How can I make that script to work on every part of my site with turbo-links enabled?

EDIT 1:

Also tried this but without success:

<script type="text/javascript">

    $(document).on('page:change', function() {
      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Finally, load addthis
      $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx");
    });
</script>

Answer 1

Have you tried this:

#app/assets/javascripts/application.js
addthis = function() {

      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Finally, load addthis
      $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx");
}

$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);

Answer 2

This solution does not need event handlers.

First, I created a partial on app/views/layouts/_add_this.html.erb:

<script type="text/javascript">
  if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
  }
</script>
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=XXXXXXXXX" type="text/javascript"></script> 

Then, whenever I need add this, I use:

<%= render 'layouts/add_this' %>

For some reason getScript did not work for me.