javascript - Addthis not loading on ajax content - Stack Overflow

admin管理员组

文章数量:1336632

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/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.

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./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.

• javascript
• jquery
• ajax
• addthis

Share Improve this question Follow edited Jul 3, 2014 at 13:20 Antoine Cloutier 1,3301111 silver badges2323 bronze badges asked Jul 3, 2014 at 12:07 AmitAmit 3,28933 gold badges2222 silver badges3131 bronze badges 8

• Have you included jquery in the page? – karthikr Commented Jul 3, 2014 at 12:10
• You mean to say in the ajax loaded content?? – Amit Commented Jul 3, 2014 at 12:12
• No. In the head section you need to include the jquery library before you can access any jquery feature – karthikr Commented Jul 3, 2014 at 12:13
• it is included in the head section – Amit Commented Jul 3, 2014 at 12:15
• Could you post the full code? – Antoine Cloutier Commented Jul 3, 2014 at 12:20

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 4

@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./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." 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>

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./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');
    }
});

本文标签： javascriptAddthis not loading on ajax contentStack Overflow