Addthis not loading on ajax content

Question

I am trying to load addthis button on dynamically loaded content but even though the script is loaded addthis toolbar doesnt appear.

jQuery(".somediv").html(response); // dynamically loaded content
jQuery.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a011f32e6cd338")
    .done(function () {
        addthis.init();
        addthis.toolbox('.addthis_sharing_toolbox');
    })

And below is the html content

<div class="addthis_sharing_toolbox"></div>

Please help.

Answer 1

@amit I was facing the same problem as you. After some research, I rooted the source of this problem.

If you added your addthis button through the dashboard, there is some shortcut html/js codes to add them in your site very quickly:

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>

But the formal way as the addthis api doc states to add the buttons to you site is like:

<div class="addthis_toolbox" data-url="domain.com" data-title="title">
    <a class="addthis_button_facebook" style="cursor:pointer"></a> 
    <a class="addthis_button_twitter" style="cursor:pointer"></a> 
    <a class="addthis_button_email" style="cursor:pointer"></a>
</div>

So, if you add the following lines inside your div box of class 'addthis_sharing_toolbox', it will finally work.

<a class="addthis_button_facebook" style="cursor:pointer"></a> 
<a class="addthis_button_twitter" style="cursor:pointer"></a> 
<a class="addthis_button_email" style="cursor:pointer"></a>

Answer 2

Step-1: Put the following code into the main template from where you will call the ajax and also display the output:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=**YOUR-PUB-ID**" async="async"></script>
//So that, we are inserting this AddThis JS source only for once;

Step-2: the dynamic (ajax) content should have the following addthis lines with other content:

<div class="addthis_sharing_toolbox">
    <a class="addthis_button_email" style="cursor:pointer"></a>
    <a class="addthis_button_facebook" style="cursor:pointer"></a>
    <a class="addthis_button_twitter" style="cursor:pointer"></a>
    <a class="addthis_button_linkedin" style="cursor:pointer"></a>
</div>

Step-3: Finally, after successful ajax load run the following line of code with the callback function;

addthis.toolbox('.addthis_sharing_toolbox');

For example:

$.ajax({
    type: "GET",
    url: MY_URL,
    //......
    success: function(data){
        //......
        $("#MY-DIV").html(data); //THIS IS IMPORTANT TO INSERT THE DYNAMIC DATA INTO THE DOM BEFORE CALLING THE FOLLOWING TRIGGER;
        addthis.toolbox('.addthis_sharing_toolbox');
    }
});