addthis buttons are disappeared?

Question

In my backbone application I have used addthis button. My problem is that when i navigate the application to the one route and go back to the main route the buttons(fb, twitter, share) are disappeared. But if I refresh the page then the buttons are being displayed, any help is appreciated.

Thanks in advance

The code is given below ...

var mainProfileView = Backbone.View.extend({
    el:"#inner",
    template: _.template($('#main-profile-tmpl').html()),
    initialize: function(){
        _.bindAll(this, "render");
        this.render();
    },
    events:{
        'click .profile-details' : 'detailedProfile',
        'click .credibility' : 'credibility',
        'click #moreReviews': 'moreReview',
        'click #moreReferences' : 'moreReferences'
    },
    detailedProfile:function(){
        router.navigate('/detailedProfile',true);
    },
    credibility : function() {
        router.navigate('/credit',true);
    },
    moreReview : function() {
        router.navigate('/moreReviews',true);
    },
    moreReferences : function() {
        router.navigate('/moreReferences',true);
    },
    render: function(){ 
        this.$el.html(this.template());
    }
});

var creditView = Backbone.View.extend({
    el:"#inner",
    template: _.template($('#credit-tmpl').html()),
    initialize: function(){
        _.bindAll(this, "render");
        this.render();
    },
    render: function(){
        this.$el.html(this.template());
    }
});

ProfileRouter = Backbone.Router.extend({
    initialize : function() {

    },
    routes : {
        '' : 'profile',
        'detailedProfile' : 'detailedProfile',
        'credit' : 'credit'
    },
    profile : function() {
        $('#img-loader').fadeIn();
        currentView = new mainProfileView();
        currentView.render();
    },
    credit : function() {
        $('#img-loader').fadeIn();
        if (currentView){
           currentView.undelegateEvents();
           delete currentView;
        }

        currentView = new creditView();
        currentView.render();
    },
    moreReviews : function() {
        $('#img-loader').fadeIn();
        if (currentView){
           currentView.undelegateEvents();
           delete currentView;
        }

        review = new Reviews;
        review.fetch({
            data: {
                  profile_id : profile_id
            },
            type : 'POST',
            success: function(model,response,options) {
                currentView = new moreReviewView({reviews : model});
                currentView.render();
            },
            error: function(model,response,options) {
                //console.log(response.responseText);
            }

        });
    }
});

one part of my template file is

<script type="text/template" id="main-profile-tmpl">
.......
            <div class="block with-padding service-area-container">
                <h5>Social</h5>
                <div class="addthis_toolbox addthis_default_style ">
                    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                    <a class="addthis_button_tweet"></a>
                    <a class="addthis_button_pinterest_pinit"></a>
                    <a class="addthis_counter addthis_pill_style"></a>
                </div>
            </div>
    </script>

Answer 1

You need to not only call the addthis_widget script every time you load the template, but you need to clear out 'cached' variables.

    if (window.addthis) {
        window.addthis = null;
        window._adr = null;
        window._atc = null;
        window._atd = null;
        window._ate = null;
        window._atr = null;
        window._atw = null;
        }  
    var uniqueUrl = "http://s7.addthis.com/js/300/addthis_widget.js#pubid=XXX";
    $.getScript(uniqueUrl)
    .done(function(script) {
      addthis.init();
    });